0

从我第一个问题开始的一天，我不敢说我​​回来了。不过这次遇到了不同的问题……

我有一个带有一些嵌套菜单的水平菜单，如下所示：

<nav>
    <ul id="mainNav">
        <li><a href="expand-the-sub-menu">Option 1</a>
            <ul id="option1Nav">
                <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 id="option2Nav">
                <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>

CraftyFella昨天帮助使基本行为正常工作，但我想对此进行扩展，以包括基于当前菜单状态的条件行为。

到目前为止的（注释）逻辑和代码如下：

$('#mainNav ul').hide();
$('#mainNav>li>a').click(function(){
    var elem = this;
    // If clicked element has a sibling ul with specified class
    if($(elem).next().hasClass("navChild")){

        // & If another child ul is already visible
        if ($('.navChild').is(':visible')){

            // Fade out any others, and fade this one in
            $(this).fadeOut(300, 'easeOutQuint', function(){
                $(elem).next("ul").fadeIn(300,'easeOutQuint');
            });
            return false;

        // Else if no child ul is visible
        }else{

            // Raise main links and fade in current child ul
            $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){
                $(elem).next().fadeIn(300,'easeOutQuint');
            });
        }

    // Else clicked element has no sibling ul with specified class
    }else{
        // If others are visible, fade them out and lower the main links
        $('#mainNav ul').fadeOut(300, 'easeOutQuint',function(){
            $('nav').animate({bottom:'24px'},300,'easeOutQuint');
        });
    }
});

简而言之：所有子菜单都应该被隐藏，如果作为点击的兄弟出现，它们应该被显示/交换，或者如果不是，则全部隐藏。

可悲的是，它不太有效，除了“交换”部分之外它几乎可以 - 如果一个子菜单已经可见，并且另一个被触发显示，两者最终都被显示，并且被点击的元素消失了（！）。

它也可能是糟糕的代码——我对此仍然很陌生——但如果有人可以帮助处理逻辑部分，我可以稍后再清理。

编辑 - http://jsfiddle.net/hKYJz/1/ - 现在奇怪的是根本不工作>:(

4

3 回答 3

1

尝试使用这个来实现

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
       $('#mainNav ul').fadeOut(300);
    $(this).find('ul').fadeIn(300);
});​
于 2012-08-16T13:02:58.177 回答
1

试试这个：

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
    var elm = this;
    $('nav').animate({
                bottom:'60px',
                duration:300,
                easing:'easeOutQuint'
            },function(){  
                    $(elm).find('ul').fadeIn(300);
            });
    $('#mainNav ul').fadeOut(300);
});

这是 JSFiddle：http: //jsfiddle.net/hKYJz/35/

于 2012-08-16T13:52:08.783 回答
0

设法让它最终工作。感谢那些做出贡献的人——如果没有你的帮助，我几乎可以肯定现在仍然被困住。

http://jsfiddle.net/hKYJz/47/

于 2012-08-16T20:30:54.847 回答