Updated Fiddle（新）

Question

我的网站上有一个垂直菜单。现在我需要在一些链接中使用下拉系统我在互联网上看到了这个例子：http://jsfiddle.net/4jxph/3018/ 但我想要一个全宽的子菜单。索尼的Dropdown系统就是我想要的。索尼的下拉系统：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

Answer 2

我在小提琴中做了滑动，其作用与sony.de完全相同：

Updated Fiddle（新）

<强> HTML

<div id="menu">
<ul>
    <div id="mainMenu">
    <li class="menu1">Home</li>
    <li class="menu2">DropDown1</li>
    <li class="menu3">DropDown2</li>
    </div>
</ul>
    <div class="submenu menu2">
        <!--menu items-->
    </div>
    <div class="submenu menu3">
        <!--menu items-->
    </div>
</div>

<强> CSS

html,body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
#menu{
    position:relative;
    width:100%;
    height:80px;
    font-family:sans-serif;
}
#menu,#menu ul,#menu>ul>#mainMenu>li,#menu div{
    display:inline-block;
    margin-top:0px;
}
#menu >ul {
    position:absolute;
    top:0px;
    z-index:100;
    list-style:none;
    padding:0px;
    font-size:18px;
    height: 80px;
    width: 100%;
    background: none repeat scroll 0% 0% #FFA500;
}
#menu ul>#mainMenu>li{
    padding: 29px;
}
#menu ul>#mainMenu>li:hover{
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all 0.2s ease 0s;
}
#menu .submenu{
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:white;
    border:1px solid black;
}

<强>的jQuery

var preClass="";
$('#menu>ul>#mainMenu>li').hover(function(){
    var curClass = $(this).attr('class');
    if(preClass!=curClass){
        $('.submenu[class*='+preClass+']').stop()
    .animate({'bottom':'0px'});
        $('.submenu[class*='+curClass+']').stop()
    .animate({'bottom':''+(-$('div[class*='+curClass+']').height())+'px'});}
    preClass=curClass;
});

$('#mainMenu').mouseleave(function(){
    preClass="";
    setTimeout(function(){
    if(preClass=="")
    $('.submenu').stop().animate({'bottom':'0px'});
    },350);
});

$('#menu').mouseleave(function(){
    preClass=""
    $('.submenu').stop().animate({'bottom':'0px'});
});

$('.submenu').hover(function(){
    preClass = $(this).attr('class').replace("submenu ","");
    $(this).css({'bottom':''+(-$(this).height())+'px'});
},
function(){
    if(preClass!=curClass){
    $(this).stop().animate({'bottom':'0px'});
    }
});

Fiddle with delay added like `sony.de`

Answer 3

检查所需的代码 jSFiddle

从Box

下载代码文件

HTML代码

<ul id="nav_menu">
    <li><a class="nav_menu_link">Home</a></li>
    <li class="nav_menu_link_drop_1">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" style="display: none;">  
            <ul id="file_menu">
                <li><a href="#file">File</a></li>
                <li><a href="#edit">Edit</a></li>
                <li><a href="#view">View</a></li>
                <li><a href="#insert">Insert</a></li>
                <li><a href="#modify">Modify</a></li>
                <li><a href="#control">Control</a></li>
                <li><a href="#debug">Debug</a></li>
                <li><a href="#window">Window</a></li>
                <li><a href="#help">Help</a></li>
            </ul>
        </div>
    <li class="nav_menu_link_drop_2">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" style="display: none;">
            <ul id="file_menu">
                <li><a href="#file">2 File</a></li>
                <li><a href="#edit">2 Edit</a></li>
                <li><a href="#view">2 View</a></li>
                <li><a href="#insert">2 Insert</a></li>
                <li><a href="#modify">2 Modify</a></li>
                <li><a href="#control">2 Control</a></li>
                <li><a href="#debug">2 Debug</a></li>
                <li><a href="#window">2 Window</a></li>
                <li><a href="#help">2 Help</a></li>
            </ul>
    </div>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

CSS代码

* {   
margin: 0;
padding: 0;
}
#nav_menu {
    position: absolute;
    display: block;
    height: 80px;
    width: 100%;
    background: orange;
}
#nav_menu li {
    list-style-type: none;
    text-decoration: none;
    vertical-align: middle;
    height: 80px;
    display: inline-block;
    position: relative;
}
.nav_menu_link {
    color: black;
    font-size: 18px;
    height: 0;
    font-family: Arial;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
    height: auto;
    padding: 29px;
}
.nav_menu_link:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all .2s;
}
.nav_menu_link:hover .arrow.down {
    border-top-color: #FFF;
}

#content1:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content2:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content1, #content2 {
    width: 100%;
    height: auto;
    background: gray;
    display: none;
    position: absolute;
}

#file_menu {
    border: 1px solid #1c1c1c;
}

#file_menu li {
    width: 100%;
    height: 30px;
    background-color: #302f2f;
}

#file_menu li a {
    font-family: Arial;
    font-size: 14px;
    color:#FFFFFF; 
    font-weight: bold;
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
}

#file_menu li a:hover {
    color: #F00880;
}

JQuery的

var link1 = $(".nav_menu_link_drop_1");
var link2 = $(".nav_menu_link_drop_2");
var content1 = $('#content1');
var content2 = $('#content2');

$(link1).hover(
    function(){ 
        $(content1).slideDown(350);
    },
    function(){
        $(content1).slideUp(350);
    }
);

$(link2).hover(
    function(){ 
        $(content2).slideDown(350);
    },
    function(){
        $(content2).slideUp(350);
    }
);

Answer 4

您可以使用仅限CSS 来实现这一目标。更清洁，更简单。

在此实时演示：http://jsfiddle.net/4jxph/3031/

这是修改后的CSS：

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#container {
    margin: auto;
}

#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}

#button {
    height: 32px;
    width: 184px;
    margin: auto;
}
#button:hover .file_menu {
    max-height: 100000px; 
    opacity: 1;
}
ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

.file_menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    width:100%;
    border: 1px solid #1c1c1c;
    transition: all .2s;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

因为你想要它，这里是JS解决方案（比其他答案更干净）：

var link = $("li[class^=nav_menu_link_drop]");

$(link).hover(

    function(){ 
        var content = $(this).next('div[id^="content"]');
        $(content).stop(true).slideDown(350);
    },
    function(){
         var content = $(this).next('div[id^="content"]');
         $(content).delay(350).slideUp(350);


    }
);

那是在做这个工作吗？ http://jsfiddle.net/3aK9k/27/

Answer 5

如果我说得对你不想要动画，那么只需将动画时间设置为0.你不需要.stop()，你应该考虑使用.hover()而不是{{} 1}}和mouseenter。这是一个链接：http://api.jquery.com/hover/

示例：

mouseleave

以下是您使用更新代码的小提琴：http://jsfiddle.net/3aK9k/2/

编辑：我刚注意到你的$(link1).hover( function(){ $(content1).slideDown(0); }, function(){ $(content1).slideUp(0); } ); - 标签位于div - 标签中，但是你的ul - 标签放在你的li中...严重检查你的标记......这不是我注意到的唯一错误的事情......

编辑：嗯...好吧......也许你应该重新考虑你的approuch，只因为它有效，你不应该使用无效的HTML

jQuery Hover下拉菜单全宽大小

5 个答案:

Updated Fiddle（新）

Fiddle with delay added like `sony.de`

检查所需的代码 jSFiddle

从Box

HTML代码

CSS代码

JQuery的

jQuery Hover下拉菜单全宽大小

5 个答案:

Updated Fiddle（新）

Fiddle with delay added like sony.de

检查所需的代码 jSFiddle

从Box

HTML代码

CSS代码

JQuery的

Fiddle with delay added like `sony.de`