определить действия для элемента li

Question

Я не буду выполнять действие для щелкнувшего li, как для примера, чтобы переключить вложенный ul

это HTML

<script type="text/javascript">
$(function() {
    $('#verticalfade').verticalfade();
});
</script>
<div id="verticalfade_container">
    <ul id="verticalfade">
        <li>Le Collezioni
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
            </ul>
        </li>
        <li>Extra Plus
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
            </ul>
        </li>
    </ul>
</div>

Это JavaScript:

(function($){
    $.fn.extend( {
        verticalfade: function(options){

            var defaults = {
                speed: 'normal'
            };
            var options = $.extend(defaults, options);


            $('ul#verticalfade li ul').each(function(){
                $('ul#verticalfade li ul').hide();
            });    

            $('ul#verticalfade li').each(function(){
                $(this).click(function(){
                    $(this).next('ul').toggle(500);
                });
        });
        }    
    });
})(jQuery);

Я скрываю все подчиненные элементы в списке, но не могу определить функцию для каждого li, чтобы показать только следующий ul. я попробовал следующую ('ul') функцию, но я могу переключать только все ul одновременно.

Answer 1

Вот простой вариант (полный исходный код на http://gist.github.com/575089):

По существу:

$('ul#verticalfade > li > ul').each(function(){
        $(this).hide();
    });    

$("ul#verticalfade > li").click(function(){
    $("ul", this).toggle(500);
});

Answer 2

изменить $(this).next('ul').toggle(500); на

//first line hides the previously clicked li's children $(this).siblings('li').children('ul').slideUp(); $(this).children('ul').toggle(500);