0

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

<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>标签中，该链接及其父链接都应突出显示。另一个警告是，我希望所有子链接在通过单击其父链接显示时都处于非活动状态。

这是一个几乎可以工作的 jsFiddle http://jsfiddle.net/pHwgk，如果你显示、隐藏，然后重新显示一个子级<ul>，你应该希望能明白我的意思——即我不希望它记住状态它以前在。

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

4

2 回答 2

1

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

我补充说：

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

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

于 2012-08-28T22:54:45.230 回答
0

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

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

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

于 2012-08-29T00:16:28.587 回答