向导手风琴 - 如何为每个部分设置不同的高度答案

【问题标题】：wizard accordion - how to set different heights for each part向导手风琴 - 如何为每个部分设置不同的高度
【发布时间】：2014-03-10 07:46:18
【问题描述】：

我是 jquery 的新手，我做了一个向导手风琴

jsFiddle

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  ));
});

});

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

【问题讨论】：

标签： jquery accordion wizard

【解决方案1】：

将此添加到您的 Jquery 中

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

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

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

【讨论】：

【解决方案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>

【讨论】：