代码之家 › 专栏 › 技术社区 › user3400679

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

wizard accordion jquery

1

user3400679 · 技术社区 · 11 年前

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

});

我对每个内容的高度都有问题。当我为一个内容设置高度时,所有内容都会自动设置为该高度, 而我想要不同高度的内容。如何为每个内容设置不同的高度?

2 回复 | 直到 11 年前

1

user2314737 11 年前

将此添加到Jquery

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

Jsfidle: http://jsfiddle.net/NDncE/74/

(参见 http://jqueryui.com/accordion/#no-auto-height )

2

0

soheil bijavar 11 年前

您的示例不需要为每个项目设置固定的高度,您可以将项目附加到每个项目中,然后自动为每个项目的内容设置高度我改变了你的例子你可以看到

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>