使用jQuery下拉水平导航

Question

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

例如： 单击level_1导航项，将显示子级别_2和级别_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

来自#nav .level_2

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

编辑显示以阻止：

这样：

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

Answer 2

请看剧本;这对你有帮助，

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