【问题标题】：jQuery Hover Drop-Down-Menu Full Width SizejQuery 悬停下拉菜单全宽大小
【发布时间】：2014-04-03 02:20:42
【问题描述】：

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

我希望我已经解释了我想要做什么。我认为这是可能的，但这使我对 JS 和 jQuery 的了解不堪重负。

谁能告诉我怎么做？

【问题讨论】：

你说的没有一些动作是什么意思？
还有一个问题 - 你想要精确的输出作为sony.de 给出的链接吗？
@Zword with "without some move" 我想说内容没有动画。
我想要这个与索尼下拉菜单的精确比例，它不必是相同的代码。 @Zword
所以你不想滑动动画？

标签： javascript jquery html css drop-down-menu

【解决方案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

【讨论】：

@Selfproblemmade 我只是在使用第一把小提琴，但明天我可以试试第二把小提琴。也就是说，如果您的问题仍然需要答案。
耶，那太好了:)
这看起来和我想象的一模一样

【解决方案2】：

我在小提琴中制作了 slidedown，其工作原理与 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`

【讨论】：

这就是我的意思，将内容悬停并悬停在内容中向下滑动的链接。容器又滑下来了，不应该这样
@Selfproblemmade 检查我的答案中的 New fiddle。告诉它是否适合您。如果有效，我将根据新的 fiddle 代码更新我的答案
告诉我On switch links do you want slide down? - 是或否
@Selfproblemmade 好的，我会根据我的理解再尝试一把小提琴。猜猜这将是你想要的小提琴
@Selfproblemmade 检查我的新答案并添加了新的小提琴

【解决方案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);
    }
);

【讨论】：

这看起来不错，但是当您将鼠标悬停在子菜单上并悬停从子菜单滑下的链接时，容器应该保持不变
假设您将 .nav_menu_link_drop_1 和 2 更改为 .nav_menu_link_drop，您可以简单地执行 $('.nav_menu_link_drop').next().slideToggle();你不需要写两次相同的代码。

【解决方案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/

【讨论】：

我想要 100% 宽度的子菜单
那里是窗口宽度的 100%。嗯，不，你是对的，我想我忘了保存：在那里看>jsfiddle.net/4jxph/3031
是的，对不起，我以为我给了你最后一个版本：jsfiddle.net/4jxph/3031
但我想要通过显示子菜单来制作 slideDown(350) 和 slideUp(350) 动画！！当您添加此内容时，您将获得赏金
使用 CSS 过渡很容易。我在上面。

【解决方案5】：

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

例子：

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

这是你的更新代码：http://jsfiddle.net/3aK9k/2/

编辑：我刚刚注意到，但是您的 html 无效，您的 div-tag 位于 ul-tag 内我注意到了...

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

【讨论】：

看起来不错。但是当我第一次悬停链接时，内容是否应该出现持续时间（350）。当我将内容悬停并再次悬停链接时，应该没有 slideDown 的持续时间甚至没有动画。我添加了动画持续时间，但这仅适用于您第一次悬停链接时：jsfiddle.net/3aK9k/4
http://jsfiddle.net/3aK9k/8/ 你是这个意思吗？但就像我说的，你应该检查你的标记并采取不同的方法！
您的小提琴代码与您在回答中的名称相同，没有区别。请阅读我的问题的要求，以及我对您的回答的评论。

Updated Fiddle(新)

Fiddle with delay added like sony.de

检查您需要的代码jSFiddle

从Box下载代码文件

HTML 代码

CSS 代码

jQuery

Fiddle with delay added like `sony.de`