Drop down horrizontal navi with jQuery

Question

我有一个特殊的导航，结构可能不是最好的，但我不能改变它。这是一个 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/

Answer 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();
        }
    }); 

这是演示

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

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);
            });                       
        }
    });

Answer 2

来自 #nav .level_2

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

编辑显示以阻止：

如：

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