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都设置为在页面加载时显示：none，但如果禁用js，默认情况下将显示所有.answer div。

干杯

Answer 1

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

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

（另外，也许可以添加一些小样式，例如:hover伪类。也许添加一些其他动画。）

Fiddle

Answer 2

我想知道，为什么在那里有很多优秀的手风琴时，从头开始尝试自己的东西 ...

您是否尝试过 Bootstrap Collapse ？

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

简单标记，您可以将其作为漏洞Bootstrap框架的一部分使用，或者从其他任何内容中使用simply use it independently（尽管您需要jQuery）

使手风琴js变得更好

2 个答案: