javascript - この特定のウェブサイトのようにテキストをドロップダウンします

Question

これは非常に幅広い質問であることは知っていますが、グーグルで検索しようとすると、ドロップダウンメニューの答えしか得られません。

質問をクリックしたときにここで行われるようなドロップダウンテキストのコードを探しています。または、少なくとも名前を付けて、より具体的にグーグルできるようにします。

Answer 1

これを行うためのコードのフィドルは次のとおりです：http：//jsfiddle.net/Zy4gW/

HTML：

<ul id="q-and-a">
    <li><a>Question One</a>
      <div>Answer to Question One...</div>
    </li>
    <li><a>Question Two</a>
      <div>Answer to Question Two...</div>
    </li>
</ul>

CSS：

ul { margin: 0; padding: 0; }
ul li { margin: 0; padding: 0; list-style: none; }
ul li a { color: blue; }
ul li div { display: none; }

JQuery：

$(function(){

  $('#q-and-a li a').each(function(){
      $(this).click(function(){
          $(this).siblings('div').slideToggle(300);            
      });        
  });                

});​​

おそらく、これほど単純なもののためのプラグインは必要ありません。適切な構造を設定してから、「表示」コンテンツを表示/非表示にします。

Answer 2

これをアコーディオンと呼びます。jQueryUIにはアコーディオンがあります。デフォルトでは、Webサイトのようには機能しませんが、同じように機能するように構成できます。