Question

即时通讯使用jQuery并尝试使用具有类“menuElement”的div列表创建菜单。每个menuElment div都有一个对应于特定菜单项的id。每个div menuElement都有两个带有menuElementHeader和menuElementBody类的div。我想最初显示menuElementHeader div，当用户选择menuElementHeader时，将使用.show（）方法显示相应的menuElementBody。我怎么能使用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/jansian/bZHtJ/1/

Answer 3

你想做这样的事吗？

http://jsfiddle.net/xzpkq/

选择具有特定类的选择器的子项

3 个答案: