使用 jQuery 的下拉水平导航答案

【问题标题】：Drop down horrizontal navi with jQuery使用 jQuery 的下拉水平导航
【发布时间】：2014-03-03 20:50:35
【问题描述】：

我有一个特殊的导航，结构可能不是最好的，但我不能改变太多。这是一个 3 级导航。

例如：您单击 level_1 导航项，子 level_2 和 level_3 导航出现。

HTML

<div id="nav">
<nav class="mod_navigation block">
<ul class="level_1">
<li class="submenu sibling first selected">
<a class="submenu sibling first" href="#" title="">Lorem</a>
<ul class="level_2" style="display: block;">
<li class="submenu first">
<a class="submenu first" href="" title="">Lorem ipsum dolor sit amet</a>
<ul class="level_3">
<li class="first">
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
</li>
<li class="submenu">
<li class="submenu last">
</ul>
</li>
<li class="submenu sibling">
</ul>
</nav>
</div>

但我的 js 代码只滑动内容而不是背景（css 悬停效果）项目（.nav）。你能帮我写代码吗？

JS代码

var $topLevelItems = $("nav > ul > li");

    $topLevelItems.click(function() {
        if (!$(this).hasClass('selected')) {
            $topLevelItems.removeClass('selected')
                .find('.level_2')
                .slideUp();

            $(this).addClass('selected')
                .find('.level_2')
                .slideDown();
        }
    });

小提琴

http://jsfiddle.net/DvG6H/2/embedded/result/

【问题讨论】：

标签： jquery navigation slidetoggle

【解决方案1】：

请看脚本；这会对你有所帮助，

var $topLevelItems = $("nav > ul > li");


$('#nav').hover(function(){
    if($('.level_2:visible').length>0){
     $('.mod_navigation').animate({height:320},200);
    }
},function(){
    $('.mod_navigation').animate({height:50},200);
});

    $topLevelItems.click(function() {
        if (!$(this).hasClass('selected')) {
            $topLevelItems.removeClass('selected')
                .find('.level_2')
                .slideUp();
             $('.mod_navigation').animate({height:320},200);
            $(this).addClass('selected')
                .find('.level_2')
                .slideDown();

        }
    });

这里是demo

请也试试这个，这将处理点击功能

var $topLevelItems = $("nav > ul > li");
    $topLevelItems.click(function() {
        if (!$(this).hasClass('selected')) {
            $topLevelItems.removeClass('selected')
                .find('.level_2')
            .slideUp('slow');

            $(this).addClass('selected')
                .find('.level_2')
            .slideDown('slow',function(){
             $('.mod_navigation').animate({height:$topLevelItems.find('.level_2:visible').height()+55},200);
            });                       
        }
    });

【讨论】：

哦，对不起，我不是这个意思，也许我解释得很奇怪。点击 nav li 时，“.nav”的高度也应该向下滚动。
太棒了，但我有一个问题，当光标离开 div ".nav" 时它会向上滑动，但只有当我单击另一个导航项时它才会向上滑动。
并且subnav的高度必须灵活。
@fr3d ：这很简单，但是一旦您单击任何链接，它将始终打开
我知道，但是如何将悬停功能更改为切换或单击功能，就像另一个一样？

【解决方案2】：

来自#nav .level_2

#nav .level_2 {
display: none;
margin-top: 50px;
position: absolute;
}

编辑显示以阻止：

这样：

#nav .level_2 {
display: block;
margin-top: 50px;
position: absolute;
}

【讨论】：

但是每次函数启动时代码都会改变显示值。