Делегирование jquery на вложенных элементах ul

Question

У меня есть вложенное ul "дерево", которое, ради этого вопроса, состоит только из пары уровней наверху и пары детей, но если вы могли бы предположить, что от верхнего ul (предназначено для id="group" здесь), что может быть несколько вложенных элементов, но они всегда будут следовать этой структуре. На данный момент у меня есть только верхние элементы, разрушающие их дочерние элементы, при разрушении. Я хочу достичь этой природы во всех элементах ul. Кроме того, я хочу также свернуть открытые элементы "на том же уровне" другого, по которому щелкнули, чтобы открылась только одна ul с другой. Я надеюсь, что объяснил функцию, которую я пытаюсь выполнить. Я чувствую, что должен использовать slideToggle() но каждая попытка с ним закончилась плохо... Я должен также сказать, что это моя первая рука на самом деле использовать delegate() но я понимаю распространение ("всплытие событий") и является одной из причин, по которым я чувствую, что это способ пойти на такую ​​задачу. Другое, что мне может понадобиться добавить новые элементы в ул. Итак, вот что у меня сейчас:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul#group').delegate('a', 'click', function(event) {
            if($(event.target).next().is(':visible')) {
                if($(event.target).next()) {
                    $(event.target).next().find('ul').slideUp(250, function() {
                        $(event.target).next().slideUp(250);
                    });
                }
            } else {
                $(event.target).next().slideDown(250);
            }
        });
    });
</script>
<ul id="group">
    <li>
        <a href="#" onclick="return false;">Foo Bar 1</a>
        <ul>
            <li>
                <a href="#" onclick="return false;">Foo 1</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Bar 1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="return false;">Foo 2</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Bar 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" onclick="return false;">Bar Foo 2</a>
        <ul>
            <li>
                <a href="#" onclick="return false;">Bar 1</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Foo 1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="return false;">Bar 2</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Foo 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

А вот ссылка jsfiddle на тестовый пример. Любой вклад приветствуется лучшим способом, которым это может быть достигнуто.

Answer 1

Это то, что вы ищете: http://jsfiddle.net/GSEDy/3/

Я сделал несколько правок.

$('ul#group').delegate('a', 'click', function(event) {
    if ($(event.target).next().is(':visible')) {
        $(event.target).next().find('ul').slideUp(250, function() {
            $(event.target).next().slideUp(250);
        });
    } else {
        $(event.target).parent().siblings().find("ul").slideUp(250);
        $(event.target).next().slideDown(250);
    }
});​

Answer 2

Проще один:

$('ul#group').delegate('a', 'click', function(event) {
  $(this).parent().children('ul').slideToggle(250);  
});
// At beginning hide elements preferably with css
$('ul#group').find('ul').hide();​​​​​​​

Без разрушающихся элементов на одном уровне.

Вот оно

Answer 3

Хотя я бы предпочел другие решения, я приведу альтернативный маршрут для примера. Я создал плагин jQuery, который некоторое время назад создает псевдо-событие clickOut, для которого я использовал минимизированную версию. Преимущество этого состоит в том, что пользователь может щелкнуть за пределами меню, и меню свернутся. http://jsfiddle.net/GSEDy/7/

$('#group li').click(function (event) {
    'use strict';
    $(this).children('ul').slideToggle(250, function () {
        $(this).find('ul').hide();
    });
    $(this).siblings().children('ul').each(function () {
        $(this).slideUp(250, function () {
            $(this).find('ul').hide();
        });
    });
    event.stopPropagation();
}).clickOut(function () {
    'use strict';
    $(this).children('ul').slideUp(250, function () {
        $(this).find('ul').hide();
    });
});​