Javascript jQuery 下拉悬停菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8775860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Drop Down Hover Menu
提问by Matt
I'm new to jQuery, I was hoping you guys could help me. I'm trying to make a hover dropdown menu, but it's extremely buggy. Can you help me clean up my Javascript? Look at my code please.
我是 jQuery 的新手，我希望你们能帮助我。我正在尝试制作一个悬停下拉菜单，但它非常有问题。你能帮我清理我的Javascript吗？请看我的代码。
It doesn't work on jsdo.it for whatever reason, but it works in Komodo Edit.
无论出于何种原因，它都不适用于 jsdo.it，但它适用于 Komodo Edit。
Try out the code yourself if you really want to, the problem is mainly the Javascript. Can you help me make it so that when the user hovers over img.menu_class, ul.file_menu drops down, and then, if I wanted, I could hover over #something in ul and it would drop out horizantally, not vertically.
如果你真的想尝试自己的代码，问题主要是 Javascript。你能帮我做一下，当用户将鼠标悬停在 img.menu_class 上时，ul.file_menu 下降，然后，如果我愿意，我可以将鼠标悬停在 ul 中的 #something 上，它会水平而不是垂直地退出。
Thanks for helping! I appreciate it!
感谢您的帮助！我很感激！
Should I just give up and make it work in CSS?
我应该放弃并让它在 CSS 中工作吗？
回答by Aram Mkrtchyan
You can do something like this:
你可以这样做此：
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function() {
$('ul.file_menu').stop(true, true).slideUp('medium');
}
});
});
And herean example with sub-menus:
而且这里有子菜单的例子：
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').slideDown('medium');
},
function() {
$('ul.file_menu').slideUp('medium');
}
);
$(".file_menu li").hover(
function() {
$(this).children("ul").slideDown('medium');
},
function() {
$(this).children("ul").slideUp('medium');
}
);
});
回答by MCB
For anyone who finds this in the future Aram's answer can be shortened with .slideToggle()to handle both up and down.
对于将来发现此问题的任何人，Aram 的答案都可以缩短.slideToggle()以处理上下。
Here's the modified fiddle
这是修改后的小提琴
http://jsfiddle.net/4jxph/2009/
http://jsfiddle.net/4jxph/2009/
If you have a sub-menu set to display: none;it will trigger it also, so what you'll want to do is set it to block, then add something like this
如果您将子菜单设置为display: none;它也会触发它，所以您要做的就是将其设置为block，然后添加类似这样的内容
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
And place it right below your first slideToggle. Why don't I just show you?
并将其放在您的第一个 slideToggle 正下方。我为什么不直接给你看？
$(document).ready(function () {
$(".hoverli").hover(function () {
$(this).find('ul').slideToggle('medium');
});
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
});
回答by androidmj
Use the finish function in jQuery to prevent the bug where you rapidly hover your mouse over the menu and out of the menu. Finish is better than the stop function previously suggested.
使用 jQuery 中的完成功能可以防止您将鼠标快速悬停在菜单上和菜单外的错误。Finish 比之前建议的 stop 功能要好。
$(document).ready(
function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').finish().slideDown('medium');
},
function () {
$('ul.file_menu').finish().slideUp('medium');
}
);
});
回答by Taylor Brown
Aram Mkrtchyan's answer was almost there for me. Problem with his was if you add anything below the menu then it gets all screwy. Here is an example of what I mean, I added a div below his menu: http://jsfiddle.net/4jxph/3418/
Aram Mkrtchyan 的回答几乎对我来说就在那里。他的问题是，如果您在菜单下方添加任何内容，则一切都会变得棘手。这是我的意思的一个例子，我在他的菜单下面添加了一个 div：http: //jsfiddle.net/4jxph/3418/
I am submitting this updated answer using div instead of lists and list items (which I find much easier to work with, and way more flexible) and jQuery version 1.9.1
我使用 div 而不是列表和列表项（我发现使用起来更容易，方式更灵活）和 jQuery 版本 1.9.1 提交这个更新的答案
here is link to jFiddle: http://jsfiddle.net/4jxph/3423/
这是 jFiddle 的链接：http: //jsfiddle.net/4jxph/3423/
Here is the code:
这是代码：
--------------- HTML:
--------------- HTML：
<div id="divMenuWrapper1" class="divMenuWrapper1">
<div id="hoverli">
<div class="lbtn">
Actions
</div>
<div id="actions_menu" class="file_menu">
<div><a href="#file">File</a></div>
<div><a href="#edit">Edit</a></div>
<div><a href="#view">View</a></div>
<hr />
<div><a href="#insert">Insert</a></div>
<div><a href="#modify">Modify</a></div>
<div><a href="#control">Control</a></div>
<div><a href="#debug">Debug</a></div>
<div><a href="#window">Window</a></div>
<div><a href="#help">Help</a></div>
</div>
</div>
</div>
<div>
testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu
</div>
--------------- Css:
--------------- Css：
.lbtn
{
display:inline-block;
cursor:pointer;
height:20px;
background-color:silver;
background-repeat:repeat-x;
border:1px solid black; /* dark navy blue */
text-decoration:none;
font-size:11pt;
text-align:center;
line-height:20px;
padding:0px 10px 0px 10px;
}
.divMenuWrapper1
{
height: 25px;
width: 75px;
}
.file_menu
{
display:none;
width:250px;
border: 1px solid #1c1c1c;
background-color: white;
position:relative;
z-index:100000;
}
.file_menu div
{
background-color: white;
font-size:10pt;
}
.file_menu div a
{
color:gray;
text-decoration:none;
padding:3px;
padding-left:15px;
display:block;
}
.file_menu div a:hover
{
padding:3px;
padding-left:15px;
text-decoration:underline;
color: black;
}
--------------- jQuery (to be placed in document.ready or pageLoad()):
--------------- jQuery（放置在 document.ready 或 pageLoad() 中）：
$("#hoverli").hover(
function () {
$('#actions_menu').finish().slideDown('fast');
},
function () {
$('#actions_menu').finish().slideUp('fast');
}
);
回答by htmelvis
Not sure if you care but you want to make sure that you run the .stop() method that way the animations dont build themselves up and run over and over. Here's an example
不确定你是否关心，但你想确保你运行 .stop() 方法，这样动画就不会建立起来并一遍又一遍地运行。这是一个例子
http://jsfiddle.net/4jxph/1335/
http://jsfiddle.net/4jxph/1335/
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function () {
$('ul.file_menu').stop(true,true).slideUp('medium');
}
);
});
回答by samnicho
I know this is probably a bit late but just found this thread saw that your question above about things below the menu 'getting a bit screwy' was unanswered.
我知道这可能有点晚了，但刚刚发现这个线程看到你上面关于菜单下面的问题“变得有点棘手”没有得到回答。
If you give your div with the class 'file menu' a position of absolute then it should cease to affect any elements ahead of it as you will have taken it out of the normal flow.
如果你给你的 div 类“文件菜单”一个绝对位置，那么它应该停止影响它前面的任何元素，因为你已经把它从正常流程中取出来了。
回答by George Fisher
To get a select box to open on hover to the exact height required by its contents, figure out how many elements there are:
要让选择框在悬停时打开到其内容所需的确切高度，请计算出有多少个元素：
JavaScript
JavaScript
function DropList(idval) {
//
// fully opens a dropdown window for a select box on hover
//
var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length;
var numOptions = document.getElementById(idval).getElementsByTagName('option').length;
document.getElementById(idval).size = numOptgroups + numOptions;
}
HTML
HTML
<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1">
<option value="0">Any height</option>
etc.
</select>
