выпадающий с вложенными элементами UL

Question

выпадающий с вложенными элементами UL

0

У меня есть некоторые вложенные элементы ul. Я хочу, чтобы скрытые элементы ul выпадали при щелчке элемента parent li. Я получил это, чтобы работать, однако, он падает каждый элемент ul с моим классом dropDown. Как я могу заставить его сбрасывать только дочернюю кнопку ul li, которая нажата?

<ul id="Ben" class="standDrop">
    <li class="dropClick">First li
        <img class="dropImg" src="img/preDropArrw.svg">
    </li>
    <!--nested ul for drowdown-->
    <ul class="dropDown">
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
    </ul>
    <!--end nested ul for drowdown-->
    <li class="dropClick">second li
        <img class="dropImg" src="img/preDropArrw.svg">
    </li>
    <!--nested ul for drowdown-->
    <ul class="dropDown">
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
    </ul>
    <!--end nested ul for drowdown-->
</ul>

JQuery:

$(document).ready(function () {
    $(".dropDown").hide();
});
$(document).ready(function () {
    $(".dropClick").click(function () {

        $(".dropDown").slideToggle("slow");
    });
});

rweni5 08 нояб. 2013, в 22:51

Источник

Теги:

jquery

html

html5

2 ответа

0

Используйте метод jQuery "find" или "children", чтобы найти элемент, который находится в определенном селекторе. Поскольку ваш элемент "dropClick" - это тот, на который происходит клик, "эта" ссылка внутри этого обработчика события будет ссылаться на этот элемент. Затем, используя "find" или "children", вы будете ссылаться только на элементы, соответствующие вашему селектору внутри "этого" элемента. Дети будут захватывать предметы сразу же внутри элемента, где "find" будет искать все поддерева, находя подменю, которое у вас может быть.

jQuery doc для детей: http://api.jquery.com/children/ jQuery doc on Найти: http://api.jquery.com/find/

Код, например:

$(document).ready(function(){
    $(".dropClick").click(function(){
        $(this).children(".dropDown").slideToggle("slow");
    });
});

Изменить: я отвечал, когда другой был отправлен, и даже не заметил UL за пределами LI. Как отметил karthikr, структура должна быть изменена, поэтому UL является подносом LI. Спецификация указывает, что только LI являются дочерними элементами UL. Списки подписок должны содержаться в элементе списка.

Daved 08 нояб. 2013, в 19:35

Ещё вопросы

karthikr · Accepted Answer · 2013-11-08T18-43-00.000Z

Я бы немного изменил структуру HTML, чтобы добиться этого:

<ul id="Ben" class="standDrop">
    <li class="dropClick">First li
        <img class="dropImg" src="img/preDropArrw.svg" />
        <!--nested ul for drowdown-->
        <ul class="dropDown">
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
        </ul>
    </li>
    <!--end nested ul for drowdown-->
    <li class="dropClick">second li
        <img class="dropImg" src="img/preDropArrw.svg" />
        <!--nested ul for drowdown-->
        <ul class="dropDown">
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
        </ul>
    </li>
    <!--end nested ul for drowdown-->
</ul>

и JS

$(document).ready(function () {
    $(".dropDown").hide();

    $(".dropClick").click(function () {
        $this = $(this);
        $this.find(".dropDown").slideToggle("slow");
    });
});

Рабочая демонстрация здесь

2 Изменения

а. Сделайте ul.dropDown элемент ul.dropDown элемента li.dropClick

б. Используйте $this.find(".dropDown") чтобы найти соответствующее меню с $this.find(".dropDown") элементами.

Спасибо! Я должен был знать лучше HTML, но я бы никогда не получил JQuery!