Question

我正在努力完成一件简单的事情。我有一个带有嵌套UL的2级菜单。内部UL设置为display：none，因此仅显示主要类别。我想在主要类别上防止默认的onclick行为，并将其各自的内部UL消失。

我的HTML就是这样：

<nav id="type-navigation">
    <ul id="nav_categories" class="subs">
        <li><a href="#">Category 1</a>
                <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                </ul>
        </li>
        <li><a href="#">Category 2</a>
                <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                </ul>
        </li>
</ul>
</nav>

我想使用Jquery来做这件事。当我点击第一个类别时，它的子UL应该显示在FadeIn旁边。当我点击另一个类别时，先前显示的UL应为FadeOut，其他类别UL应为FadeIn。

这是我的Jquery，并没有按预期工作：

$("ul li a").toggle(function() { 
                  $(this).children("ul").fadeIn("slow");
                  },
                   function() { 
                 $(this).children("ul").fadeOut("slow"); 
                });

Answer 1

假设您的<ul>旁边的<a>隐藏了css display:none：

$(".subs > li > a").click(function() {
    $(this).parents('.subs').find('ul').hide();
    if($(this).next("ul").is(":visible")) {
            $(this).next("ul").fadeOut("slow");
    }    else {
        $(this).next("ul").fadeIn("slow");
    }
    return false;
});

Answer 2

尝试this example。

示例中的CSS：

nav > ul > li > ul {
 display:none;   
}

jQuery from example：

$( 'ul#nav_categories > li > a' ).click( function(e) {
    e.preventDefault();
    theClickedLi = $( this );
    $( '#nav_categories' ).find( 'ul' ).fadeOut();
    theClickedLi.parent('li').find( 'ul' ).fadeIn();
} );

希望这有帮助。

Jquery内部UL FadeIn / FadeOut

2 个答案: