javascript 子菜单的javascript悬停功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15308917/
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
javascript hover function for submenu
提问by user2151084
I'm pretty new at trying to understand javascript and I've been pooling over multiple examples trying to figure out what I'm doing wrong, but cant get this working properly. At one point I had working with onmouseover/mouseout but it only worked on 1 of the menus.
我在尝试理解 javascript 方面还很陌生，我一直在汇集多个示例，试图找出我做错了什么，但无法正常工作。有一次，我使用过 onmouseover/mouseout，但它只适用于其中 1 个菜单。
I'm sure it is something simple I have overlooked, but any help would be appreciated.
我确定这是我忽略的一些简单的事情，但任何帮助将不胜感激。
jQuery(document).ready(function($) {
$('#top-menu').hover(
function () {
$('#submenu').show(active);
},
function () {
$('#submenu').hide(non-active);
}
);
});
<ul id="menu" class="nav-menu">
<li>Home</li>
<li id="top-menu"><a href="#">About Us</a>
</li>
<ul id="submenu" class="sub-menu non-active">
<li>US</li>
<li>Our Style</li>
<li>The Experience</li>
</ul>
<li id="top-menu"><a href="#">Galleries</a>
</li>
<ul id="submenu" class="sub-menu non-active">
<li>Weddings</li>
<li>Engagements</li>
<li>Featured Weddings</li>
</ul>
<li id="top-menu"><a href="#">The Details</a>
</li>
<ul id="submenu" class="sub-menu non-active">
<li>Investment</li>
<li>Press and Awards</li>
<li>Testimonials</li>
</ul>
<li>FAQ</li>
<li>Contact</li>
<li>The Blog</li>
</ul>
.nav-menu {
list-style-type:none;
text-align:center;
text-transform:uppercase;
font-weight:bold;
font: 24px'Playfair Display', Georgia, serif;
}
.navmenu ul li {
margin:30px;
}
.non-active {
display:none;
}
.active {
display:inline;
}
回答by Bart
It doesn't answer your specific question but the same behavior can be easily achieved with css. This way you don't depend on javascript being turned on for standard menu access.
它没有回答您的具体问题，但使用 css 可以轻松实现相同的行为。这样您就不必依赖为标准菜单访问而打开 javascript。
HTML
HTML
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Galleries</a>
<ul>
<li>Gallery #1</li>
<li>Gallery #2</li>
</ul>
</li>
<li>
<a href="#">Albums</a>
<ul>
<li>Album #1</li>
<li>Album #2</li>
</ul>
</li>
</ul>
CSS
CSS
ul.menu li ul {
display:none;
}
ul.menu li:hover ul {
display:block;
position:relative;
}
回答by psu
You are using hide and show wrong. http://api.jquery.com/show/http://api.jquery.com/hide/
您正在使用隐藏并显示错误。 http://api.jquery.com/show/ http://api.jquery.com/hide/
$('#top-menu').hover(
function () {
$('#submenu').show();
},
function () {
$('#submenu').hide();
}
);
回答by Amy
idmust be unique. If you have multiple elements with the same id, jquery will not retrieve all the elements when you do $('#top-menu'), it'll only find the first element that matches the selector.
id必须是唯一的。如果您有多个相同id的元素，当您执行 $('#top-menu') 时，jquery 将不会检索所有元素，它只会找到与选择器匹配的第一个元素。
回答by Brigand
We're going to need to change the HTML a bit. IDs are used only once on a page. Classes are similar, but can be applied to any number of elements. We also want to nest our sub-menu's under the top-menu. That way the association is more clear.
我们将需要稍微更改 HTML。ID 仅在页面上使用一次。类是相似的，但可以应用于任意数量的元素。我们还想将我们的子菜单嵌套在顶级菜单下。这样关联就更清楚了。
<li class="top-menu"><a href="#">About Us</a>
<ul class="sub-menu non-active">
<li>Ashley + David</li>
<li>Our Style</li>
<li>The Experience</li>
</ul>
</li>
We want to specify the nested sub-menu to show or hide. $(this)refers to the top-menu that was hovered over.
我们要指定嵌套的子菜单来显示或隐藏。 $(this)指的是悬停在上面的顶部菜单。
$('.top-menu').hover(
function () {
$(this).find('.sub-menu').show("slow");
},
function () {
$(this).find('.sub-menu').hide("slow");
}
);
demo
演示
回答by jzap
I updated your work. Is this what are trying to establish?
我更新了你的作品。这是试图建立的吗？
$('#top-menu').mouseover(function(){
$('#submenu').addClass('active');
});
$('#top-menu').mouseout(function(){
$('#submenu').removeClass('active');
});
