javascript - 让手风琴js更好

Question

我已经使用 jQuery 编写了一个简单的手风琴常见问题解答列表，但正在寻找一些关于如何更好地改进它的反馈。

我的标记看起来像这样：

<ul class="faqs">
   <li><h4>Question</h4>
       <div class="answer">answer</div>
   </li>
   <li><h4>Question</h4>
       <div class="answer">answer</div>
   </li>
   <li><h4>Question</h4>
       <div class="answer">answer</div>
   </li>
</ul>

我的 JS 看起来像这样：

var question = $('.faqs h4');
question.click(function() {
    $(this).next('div').slideToggle('fast');
});

所有 .answer div 在页面加载时都设置为 display:none，但如果禁用 js，则默认显示所有 .answer div。

干杯

Answer 1

我建议添加$(".answer").slideUp()，以便一次只能打开一个手风琴项目：

var question = $('.faqs h4');
question.click(function() {
    $(".answer").slideUp();
    $(this).next('div').slideToggle('fast');
});

（另外，可能会添加一些样式，例如:hover伪类。可能会添加一些其他动画。）

• 小提琴

Answer 2

我想知道，既然有这么多好手风琴，为什么要从头开始尝试一些东西......

您尝试过Bootstrap Collapse吗？

http://twitter.github.com/bootstrap/javascript.html#collapse

简单的标记，您可以将其用作 Hole Bootstrap 框架的一部分，或者简单地独立于其他任何东西使用它（尽管您需要 jQuery）