簡單的手風琴菜單（jQuery）

Question

jQuery的：

// ACCORDION
$('.accordion .answer').hide(); // hide all
$('.accordion .question').click(function(){
     $('.accordion .answer').slideUp(); // hide all open
     $(this).addClass('active').next().slideDown(); // show the anwser
     return false;
});

HTML：

<dl class="accordion">
    <dt class="question">question</dt>
    <dd class="answer">answer</dd>
    <dt class="question">question</dt>
    <dd class="answer">answer</dd>
</dl>

...有效，但是

• 必須從無效的問題元素中刪除“有效”類，
• 至少有一個答案是公開的； 所有答案都應該能夠結束。

謝謝！

Answer 1

$('.accordion .answer').hide(); // hide all
$('.accordion .question').click(function(){
    if($(this).hasClass('active')) {
        $(this).removeClass('active').next().slideUp();
    } else {
        $('.accordion .answer').removeClass('active').slideUp();
        $(this).addClass('active').next().slideDown();
    }
    return false;
});

但是您應該真正看一下jQuery UI Accordion 。

Answer 2

好吧，想通了：

$('.accordion .answer').hide(); // hide all
$(".accordion .question").click(function () {
    $(this).toggleClass('active').next(".answer").slideToggle(300).siblings(".answer").slideUp("slow");
    $(this).siblings().removeClass('active');
});