選擇具有特定類別的選擇器的孩子

Question

即時通訊使用jQuery和即時通訊嘗試創建一個菜單使用類別爲「menuElement」類的div列表。每個menuElment div都有一個對應於特定菜單項的id。每個div menuElement都有兩個div，分別是menuElementHeader和menuElementBody。我想最初顯示menuElementHeader div，當用戶選擇menuElementHeader時，將使用.show（）方法顯示相應的menuElementBody。我如何使用teh 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

注意兩個要素不能有相同的ID！編輯：現在已更正。

根據您的描述，我認爲你想：

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

隱藏與CSS所有.menuElementBody開始：

.menuElementBody { 
    display: none; 
} 

或者，你可以在click處理程序綁定到.menuElement元素：

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

Answer 2

你想要做這樣的事嗎？

http://jsfiddle.net/xzpkq/

Answer 3

我認爲這是你想要的東西:)

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