0

我已经使用 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。

干杯

4

2 回答 2

0

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

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

(另外,可能会添加一些样式,例如:hover伪类。可能会添加一些其他动画。)

于 2012-11-20T07:14:03.823 回答
0

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

您尝试过Bootstrap Collapse吗?

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

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

于 2012-11-20T08:14:06.473 回答