特定のクラス

Question

のセレクタの子をjQueryを使用して選択し、imがクラス "menuElement"を持つdivのリストを使用してメニューを作成しようとしています。各menuElment divには、特定のメニュー項目に対応するidがあります。各div menuElementには、menuElementHeaderクラスとmenuElementBodyクラスを持つ2つのdivがあります。最初にmenuElementHeader divを表示したいのですが、ユーザーがmenuElementHeaderを選択すると、対応するmenuElementBodyが.show（）メソッドを使用して表示されます。どのように私はこれを行うことができますidのmenuElementのdivのIDを使用して？

<ul class="horMenu"> 
    <li> 
     <div class="menuElement" id="newTemplate"> 
      <div class="menuElementHeader">New Template</div> 
      <div class="menuElementBody">add template info here</div> 
     </div> 
    </li> 
    <li> 
     <div class="menuElement" id="openTemplate"> 
      <div class="menuElementHeader">Open Template</div> 
      <div class="menuElementBody">open template info here</div> 
     </div> 
    </li> 
</ul> 

Answer 1

注意！編集：これは今修正されました。あなたの説明に基づいて

私は、あなたがしたいと思う：

$('.menuElementHeader').click(function() { 
    $(this).next('.menuElementBody').toggle(); 
}); 

を隠すCSSで最初にすべての.menuElementBody：

：

また

.menuElementBody { 
    display: none; 
} 

、あなたは.menuElement要素にclickハンドラをバインドすることができます

$('.menuElement').click(function() { 
    $(this).children('.menuElementBody').toggle(); 
}); 

Answer 2

このようなことをしようとしていますか？二つの要素が同じIDを持つことができないという

http://jsfiddle.net/xzpkq/

Answer 3

私は、これはあなたがあなたのHTML構造を投稿することができればそれは役に立ち**非常に**だろう:)

http://jsfiddle.net/jansian/bZHtJ/1/