0

我正在尝试完成一件简单的事情。我有一个带有嵌套 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"); 
                });
4

2 回答 2

2

试试这个例子。

来自示例的 CSS：

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

来自示例的 jQuery：

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

希望这可以帮助。

于 2012-06-08T08:17:43.813 回答
2

假设你<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;
});
于 2012-06-08T08:11:44.050 回答