Question

我有一个带有基本嵌套列表的菜单，如下所示：

<nav>
    <ul id="mainNav">

        <li><a href="expand-the-sub-menu">Option 1</a>
            <ul class="navChild">
                <li><a href="somewhere">Option 1 Link 1</a></li>
                <li><a href="somewhere">Option 1 Link 2</a></li>
                <li><a href="somewhere">Option 1 Link 3</a></li>
                <li><a href="somewhere">Option 1 Link 4</a></li>
                <li><a href="somewhere">Option 1 Link 5</a></li>
            </ul>
        </li>

        <li><a href="expand-the-sub-menu">Option 2</a>
            <ul class="navChild">
                <li><a href="somewhere">Option 2 Link 1</a></li>
                <li><a href="somewhere">Option 2 Link 2</a></li>
                <li><a href="somewhere">Option 2 Link 3</a></li>
                <li><a href="somewhere">Option 2 Link 4</a></li>
                <li><a href="somewhere">Option 2 Link 5</a></li>
            </ul>
        </li>

        <li><a href="somewhere">Option 3</a></li>
        <li><a href="somewhere">Option 4</a></li>
        <li><a href="somewhere">Option 5</a></li>
        <li><a href="somewhere">Option 6</a></li>
    </ul>
</nav>

我已经写了一些条件脚本来产生所需的动画效果，具体取决于当前的菜单状态：

$('#mainNav ul').hide();

$('#mainNav>li>a').click(function(){
    var elm = this;

    // If clicked element has a sibling ul with specified class
    if ($(elm).next().hasClass('navChild')){
        // ... & another child ul is already visible
        if ($('.navChild').is(':visible')){
            $('#mainNav ul').fadeOut(300, function() {
                $(elm).siblings('ul').fadeIn(300);
            });
        // ... & no child ul is visible
        } else {
            $('nav').animate({bottom:'60px'},300,function(){
               $(elm).next().fadeIn(300);
            });
        }

    // Else clicked element has no sibling ul with specified class
    } else {
        // ... & another child ul is already visible
        if ($('.navChild').is(':visible')){
            $('#mainNav ul').fadeOut(300, function(){
                $('nav').animate({bottom:'24px'});
            });
        // ... & no child ul is visible
        } else {
            // Follow link as usual
        }
    }
});

代码可能很丑陋且冗长，但它确实有用。

我现在要做的是突出显示当前菜单项。如果它是顶级<a>标记，则应突出显示该链接。但是，在子级<a>标记中，应突出显示链接和其父链接。另一个警告是，我希望所有子链接在通过点击其父链接显示时处于非活动状态。

这里＆＃39; sa jsFiddle http://jsfiddle.net/pHwgk几乎可以工作，如果你展示，隐藏，然后重新展示一个孩子等级<ul>，你应该希望看到我的意思 - 即我不＆＃ 39;不希望它记住以前的状态。

我希望有人会有一个优雅的解决方案来节省我可能不必要的大量编码。

Answer 1

看看这个：http://jsfiddle.net/adamzr/ku6Yj/

我补充说：

$('.navChild>li>a').each(function(){
    $(this).addClass('off');
});

在单击主级别链接时调用。它会将所有较低级别的链接设置为“关闭”状态。这应该消除“记忆效应”，并确保在点击之前出现次级链接。

Answer 2

整理一些不必要的代码以获得更好的效果和结果：

http://jsfiddle.net/Madevil/hBVqF/

在这种情况下，您不需要.each()到.addClass()或操纵。

在嵌套元素中设置活动状态

2 个答案: