Question

单击标题可展开/折叠分解的内容逻辑部分，
但是这些部分的默认高度已经定义。假设我必须给出一个固定的高度即200px。我们如何定制点击后扩展的高度标题即第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();
       });

Answer 1

如果您关心内容高度，可以查看“heightStyle”属性，或者，如果要使用自定义高度逻辑，可以使用“beforeActivate”事件。事件在激活选项卡之前触发。所以在这种情况下，可以改变高度。

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

希望这会有所帮助。

如何自定义Accordion中扩展内容的高度

1 个答案: