javascript - jQuery 悬停下拉菜单全宽大小

Question

我的网站有一个垂直菜单。现在我需要在某些链接中使用下拉系统。
我在网上看到这个例子:http://jsfiddle.net/4jxph/3018/但我想要一个全 Angular 子菜单。索尼的下拉系统是我想要的。索尼的下拉系统:Sony我总是创建一个全宽大小的下拉菜单。
我的代码:http://www.jsfiddle.net/3aK9k/4 .
所以我想要的是，当我将鼠标悬停在 content 上时，子菜单并再次指向菜单链接，该链接向下滑动子菜单而不是子菜单应该没有任何移动。

我希望我已经解释了我想做什么。我认为这是可能的，但这让我对 JS 和 jQuery 的知识不知所措。

谁能告诉我怎么做？

Answer 1

HTML

    <ul id="nav_menu">
    <li><a class="nav_menu_link nav">Home</a></li>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" class="content" style="display: none;">
            <ul style="padding: 20px; height: auto;">
                <li><a href="#">Item1</a></li><br />
                      <li><a href="#">Item2</a></li><br />
                      <li><a href="#">Item3</a></li><br />
                      <li><a href="#">Item4</a></li>
            </ul>
    </div>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" class="content" style="display: none;">
        <ul style="padding: 20px; height: auto;">
            <li><a href="#">Other</a></li><br />
                      <li><a href="#">Other Test</a></li>
        </ul>
    </div>
</ul>

jQuery

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){    
    }
);

$('#nav_menu').hover(
    function(){
    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

FIDDLE