0

jQuery を使用して簡単なアコーディオン FAQ リストを作成しましたが、それを改善する方法についてのフィードバックを探しています。

私のマークアップは次のようになります。

<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()一度に1 つのアコーディオン項目しか開くことができないように追加することをお勧めします。

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

シンプルなマークアップで、Bootstrap Framework の穴の一部として使用することも、他のものから独立して使用することもできます (ただし、jQuery が必要です)。

于 2012-11-20T08:14:06.473 に答える