Question

我是jquery的新手，我制作了一个精灵手风琴

HTML：

    <div id="accordion">
    <h3><a href="#">Step 1</a></h3>
        <div class="content">
                <p> test
                </p>
            <button class='next'>
                Next
            </button>
         </div>
     <h3><a href="#">Step 2</a></h3>
            <div class="content">
                 <p>   test
                </p>
                <button class='previous'>
                    Previous
                </button>
                <button class='next'>
                    Next
                </button>
            </div>
    <h3><a href="#">Step 3</a></h3>
        <div class="content">
            <p> test
            </p>
            <button class='previous'>
                Previous
            </button>
        </div>

JQuery的：

jQuery(document).ready(function(){
$('#accordion').accordion();
$('#accordion button').click(function(e) {
    e.preventDefault();
    var delta = ($(this).is('.next') ? 1 : -1);
    $('#accordion').accordion('option', 'active', ( $('#accordion').accordion('option','active') + delta  ));
});

}）;

我的每个内容的高度都有问题。当我为一个内容设置高度时，所有内容都会自动设置为该数量，虽然我想要有不同高度的内容。如何为每个内容设置不同的高度？

Answer 1

将此添加到您的Jquery

   $( "#accordion" ).accordion({
      heightStyle: "content"
    });

Jsfiddle：http://jsfiddle.net/NDncE/74/

（见http://jqueryui.com/accordion/#no-auto-height）

Answer 2

您的示例不需要为每个项目添加固定高度，每个项目最多可以附加项目，然后自动设置高度，并为手风琴中的每个项目设置内容我改变了你的例子，你可以看到这个

new fiddle

<div class="content">
    <p>long height item</p>
    </br>long height</br>
    </br>long height</br>long height
    <button class='next'>Next</button>
</div>

精灵手风琴 - 如何为每个部分设置不同的高度

2 个答案: