jquery手风琴定制导航

时间:2012-08-22 03:29:48

标签: jquery jquery-ui accordion

我需要创建一个展开全部并折叠所有导航为jquery手风琴。

我的每个手风琴都能正常工作:

$('.accordion h3').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();

<div class="accordion">
<h3 class="head"><a href="#">Section 1</a></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>

<div class="accordion">
    <h3><a href="#">Section 2</a></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>

ETC .....

我需要做一些像这样的事情来扩展所有和相反的崩溃所有:

$('#nav .expand').click(function(){
    $('.accordion h3').next().animate({
            height: "auto"
        });
        return false;
});

仍然是jquery的新手,所以不知道它提供的所有内容。有人能指出我正朝着正确的方向努力。 感谢

1 个答案:

答案 0 :(得分:1)

似乎你没有使用jQuery ui Accordion。

这是$.accordion()http://jsfiddle.net/C3Gra/1/

的小提琴

没有$.accordion()的小提琴:http://jsfiddle.net/w2uXZ/

编辑:$.accordion()在扩展所有内容时效果不佳,因为其内部状态最多只能有一个活动元素。