选择具有特定类别的选择器的孩子

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/