выбрать потомка селектора с определенным классом

Question

Я использую jQuery, и я пытаюсь создать меню, используя список div, которые имеют класс «menuElement».каждый элемент menuElment имеет идентификатор, соответствующий конкретному пункту меню.Каждый элемент div menuElement имеет два элемента div с классами menuElementHeader и menuElementBody.я хочу отобразить div menuElementHeader изначально, и когда пользователь выбирает menuElementHeader, соответствующий menuElementBody будет показан с использованием метода .show ().Как я могу сделать это, используя идентификатор элемента меню menuElement div?

<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();
});

Скрыть все .menuElementBody изначально с помощью CSS:

.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/