아코디언 확대 내용의 높이를 지정하는 방법

클릭 헤더는 논리적 섹션으로 나뉩니다/축소 콘텐츠를 확장 할 때
하지만 고정을 제공해야 .Suppose 그 섹션의 몇 가지 기본 높이가 정의되어 200 픽셀 괜찮나 즉
높이 우리는 헤더 즉 제 1의 클릭 절 이후에 확장 높이를 사용자 정의 할 수 있습니다 2아코디언 확대 내용의 높이를 지정하는 방법

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>jQuery UI Accordion - Default functionality</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery- 
     ui.css"   
     /> 
     <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 

    </head> 


     <div id="accordion"> 
     <h3>Section 1</h3> 
     <div> 
      <p> 
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
      ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
      amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
      odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
      </p> 
     </div> 
     <h3>Section 2</h3> 
     <div> 
      <p> 
      Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
      purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
      velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
      suscipit faucibus urna. 
      </p> 
     </div> 

     </div> 
    </html> 
    javascript:- 
    $(function() { 
      $("#accordion").accordion(); 
     });

출처

2012-11-23 Little bird

내용 높이가 걱정되는 경우 "heightStyle"속성, 을 보거나 사용자 정의 높이 논리를 사용하려면 "beforeActivate"이벤트를 사용할 수 있습니다. 탭을 활성화하기 전에 이벤트가 시작됩니다. 그래서이 경우 높이 변경이 가능할 수 있습니다.

$(function() { 
    $("#accordion").accordion({ 
     collapsible: true, 
     active: false, 
     beforeActivate: function(event, ui){ 
      $(ui.newPanel).css('height', '20'); 
     } 
    }); 
});

희망이 도움이됩니다.

출처

2012-11-23 07:01:20 shakib

답장 용으로는 고맙습니다.하지만 콘텐츠 높이가 고정 된 높이를 가져야한다는 사실은 모든 확장 된 콘텐츠가 고정 된 높이, 즉 200 픽셀을 가져야 함을 의미합니다. 콘텐츠가 더 많이 들어가면 스크롤 가능으로 변해야합니다. 앞으로 내가 예측할 수없는 부분에 추가해야하는 콘텐츠가 얼마 남지 않기 때문에 스크롤 할 수 있기 때문에 필요합니다. –

이 예제를 수정하면된다고 생각합니다. http://jqueryui.com/accordion/#fillspace. 외부 컨테이너의 고정 높이가 220 옥텟임을 알 수 있습니다. 전체 아코디언에는 스크롤 바가 포함되어 있습니다. – shakib

나는 당신이 제안한 것을 해보려고했으나, 문제가 내 코드에 정확히 무엇인지 알 수는 없다. http://jsfiddle.net/ZJJM6/1/ 이것은 내 코드입니다. 내 대답을 얻는 데 나를 도와주세요 :) –

아코디언 확대 내용의 높이를 지정하는 방법

답변

관련 문제