jQuery - 動的にリスト項目をjQueryトグルに変換

Question

リスト項目をページ内の要素のjQueryトグルに自動的に変換したいと思います。例えば

、ここではいくつかのサンプル・ページのコードは次のとおりです。

<div id="page"> 
    <div id="menu"> 
     <ul> 
      <li class="books">Books</li> 
      <li class="cars">Cars</li> 
      <li class="sausages">Sausages</li> 
     </ul> 
    </div> 

    <div id="elements"> 
     <div class="books">This layer displays a range of books</div> 
     <div class="cars">This layer displays a range of cars</div> 
     <div class="sausages">This layer displays a range of sausages</div> 
    </div> 
</div> 

各メニューのリスト項目と各要素DIV、あなたが見ることができるように、同じクラス名を共有しています。

jQueryを使って達成したいのは、各メニューリスト項目をトグルに自動的に切り替えることです。このトグルは要素セクションの腐食性DIVを切り替えることができます。

基本的には、メニュー項目を読み込み、そのメニュー項目に腐食性要素レイヤがあるかどうかを確認し、そうであればレイヤーを切り替えることができるトグルにします。

メニュー項目や要素レイヤーが定期的に追加および削除され、最終的には数十のレイヤーが組み込まれる可能性があるため、動的である必要があります。

可能であれば、jsFiddleでデモンストレーションしてください。

ありがとうございます！

EDIT：jQueryを使用して特定の要素を非表示にする方法を知っています。ここでは、要素名をコードにハードコードしますが、どのように動的にするかはわかりません。私はここに投稿する前に少なくとも2時間はグーグルグーグルを試みた。

Answer 1

上記のコメント者はあなたの投稿にもっと力を入れてください。 SOが「do my homework for me」のサイトではないことに加え、あなたの説明はわかりにくいです。いくつかのコード（擬似コードでさえ）が役に立ちます。

私たちが知らないことさえわからないことがあり、それが私たちの質問をコミュニケーションすることを非常に困難にすることを理解しています。私はあなたが欲しいものを理解することに苦労していながら、私はそれを正しく読めば、このようなものが動作するはずですので：

HMTL

<div id="page"> 
    <div id="menu"> 
     <ul> 
      <li class="books">Books</li> 
      <li class="cars">Cars</li> 
      <li class="sausages">Sausages</li> 
     </ul> 
    </div> 
    <hr /> 
    <div id="elements"> 
     <div class="books">This layer displays a range of books</div> 
     <div class="cars">This layer displays a range of cars</div> 
     <div class="sausages">This layer displays a range of sausages</div> 
    </div> 
</div>​ 

Javascriptをは

$('#menu ul li').on('click', function() { 
    var $matchingDIV = $('#elements div.' + $(this).attr('class')); 

    $matchingDIV.toggle(!$matchingDIV.is(':visible')); 
});​ 

ここにありますFiddle

ここで、 LI要素に複数のクラス名を追加します。また、要素の表示を開始するかどうか、または一度に1つしか表示しないようにするかどうかはわかりませんでした。うまくいけば、これを実行して実行することもできますが、質問がある場合は質問してください。