1

  • 当单击标题以展开/折叠被分成逻辑部分
    的内容时，但这些部分定义了一些默认高度。假设我必须给出一个固定
    的高度，即 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();
       });​
4

1 回答 1

0

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

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

希望这可以帮助。

于 2012-11-23T07:01:20.507 回答