简单的折叠式菜单（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() { 
    $(this).toggleClass('active').next(".answer").slideToggle(300).siblings(".answer").slideUp("slow"); 
    $(this).siblings().removeClass('active'); 
}); 

Answer 2

$('.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。