Question

我不会对点击的li执行操作，就像expample切换嵌套的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);

我隐藏列表中的所有子ul但我无法为每个li定义一个函数来仅显示下一个ul。我尝试了下一个（'ul'）函数，但我只能一次切换所有ul。

Answer 1

变化 $(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);

Answer 2

这是一个简单的变体（http://gist.github.com/575089的完整来源）：

本质上：

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

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

为li项定义动作

2 个答案: