jQuery - live() не работает с next() из добавленного div

Цель этого элемента — иметь сворачиваемую систему навигации, полностью основанную на простом неупорядоченном списке. По умолчанию все вложенные списки будут скрыты, а элементы div (кнопки) .toggle прикреплены к элементам li, которые содержат вложенный список. Затем эти элементы div .toggle должны скрывать/показывать вложенный список, а также применять класс к кнопке переключения.

Я проверил этот код, вручную вставив .toggle div (местоположение, отмеченное [toggle div]), и все работает отлично. Однако, когда он добавляется через append(), ничего не работает. Кто-нибудь знает, что может быть причиной этой проблемы? Любая помощь будет принята с благодарностью - спасибо!

HTML:

<div id="nav">
<ul>
<li><a href="#">nav item</a>[toggle div]
    <ul>
        <li><a href="#">nav item</a></li>
        <li><a href="#">nav item</a></li>
        <li><a href="#">nav item</a>[toggle div]
            <ul>
                <li><a href="#">nav item</a></li>
                <li><a href="#">nav item</a></li>
                <li><a href="#">nav item</a></li>
            </ul>
        </li>
        <li><a href="#">nav item</a></li>
    </ul>
</li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</div>

jQuery:

$(function(){
$("#nav ul li").has("ul").append("<div class='toggle'></div>");
$(".toggle").live("click", function() {
    if($(this).next().is(":hidden")) {
        $(this).next().show();
        $(this).addClass("toggled");
    } else {
        $(this).next().hide();
        $(this).removeClass("toggled");
    }
});
});

jquery next append live
person mdmoreau    schedule 26.05.2011    source источник
comment
Какой элемент имеет идентификатор #nav? Кроме того, вы добавляете div toggle в конец li.   -  person The Scrum Meister    schedule 26.05.2011
comment
Извините за это - только что включил #nav div, который обертывает неупорядоченный список. Тоже разобрался! Мне нужно было переключить .next() на .prev(), так как он не добавляется туда, куда я его вручную поместил - глупая оплошность. Спасибо что подметил это!   -  person mdmoreau    schedule 26.05.2011

Ответы (2)


arrow_upward
3
arrow_downward

Попробуй это:

$("#nav li > ul").before('<div class="toggle"></div>');

Если будут выбраны все элементы <ul>, которые непосредственно вложены в элементы <li>, и добавлены <div> перед каждым из них.

Посмотрите демо: http://jsfiddle.net/xXRSZ/1/

person DarthJDG    schedule 26.05.2011
comment
Это прекрасный пример того, что я пытался сделать. Похоже, что этот метод будет работать с исходным кодом и, безусловно, является чистой альтернативой внесенным мной изменениям append/prev. Спасибо за помощь! - person mdmoreau; 26.05.2011

arrow_upward
2
arrow_downward

Что вы хотите сделать, так это добавить переключатель div, а не добавить его.

Обновите свой код, чтобы использовать функцию prepend:

$("#nav ul li").has("ul").prepend("<div class='toggle'>[toggle div]</div>");

Рабочий пример

person The Scrum Meister    schedule 26.05.2011
comment
Я думаю, что постер хочет переключить <ul>, а не якорь. Просто добавьте немного CSS и дайте немного левого поля для <li>, чтобы увидеть, что не так. - person DarthJDG; 26.05.2011