CSS/Jquery 显示隐藏子菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/947513/
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
CSS/Jquery to show hide submenu
提问by Zac
still trying to figure out jQuery and I need some help with a sidebar list.
仍然试图找出 jQuery，我需要一些侧边栏列表的帮助。
I am editing this after trying some stuff.
我在尝试了一些东西后正在编辑它。
I am trying to have the submenu hidden until a specific list item is moused over, then another menu appears to the side of the sidebar and you are able to mouse over those selections. I am halfway there but when you mouseout it disappears before you can mouseover any of the items. I will add hoverIntent but I do not think that is the problem as I need that whole hidden block to also be a trigger to show that element. I tried Steerpikes solution below but it caused the entire main list to disappear after mouse out.
我试图隐藏子菜单，直到将鼠标悬停在特定列表项上，然后侧边栏的一侧会出现另一个菜单，您可以将鼠标悬停在这些选择上。我已经到了一半，但是当您移出鼠标时，它会在您将鼠标悬停在任何项目上之前消失。我将添加hoverIntent，但我认为这不是问题，因为我需要整个隐藏块也作为显示该元素的触发器。我尝试了下面的 Steerpikes 解决方案，但它导致整个主列表在鼠标移开后消失。
Here is the structure now:
这是现在的结构：
<ul>
<li>Always Showing Element</li>
<li class="trigger">Title that triggers Submenu
<ul>
<li>
Hidden Menu
</li>
</ul>
</li>
</ul>
and the script
和脚本
$('li.trigger ul').hide();
$('li.trigger').hover(function() {
$('li.trigger ul').show();
},
function() {
$('li.trigger ul').hide();
});
So how can I keep it showing while my mouse are over the li.trigger ul li elementes?
那么当我的鼠标悬停在 li.trigger ul li elementes 上时，我怎样才能让它显示出来呢？
Thanks for the help with this!
感谢您的帮助！
Nevermind... this works now, I just had the positioning off but now it overlaps a bit and with hoverintent adding a little delay there is no problem.
没关系......现在可以使用了，我只是关闭了定位，但现在它有点重叠，并且使用hoverintent增加一点延迟没有问题。
回答by Steerpike
The follwing should work. I just wrote something similar 3 minutes ago :)
以下应该工作。我刚刚在 3 分钟前写了类似的东西:)
<ul id='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>
$('#menu li').hover(function() {
$(this).find('ul').show();
},
function() {
$(this).find('ul').hide();
});
Remember that hover()takes two arguments - what happens when you mouse in and what happens when you mouse out.
请记住，这hover()需要两个参数 - 鼠标移入时发生的情况和鼠标移出时发生的情况。
回答by Tim Banks
I would consider using CSS to do this feature. Since this is for a menu, you want it to be very accessible. Users that have javascript turned off (think mobile browsers too) or anyone using a screen reader will not be able to use your menu.
我会考虑使用 CSS 来做这个功能。由于这是用于菜单，因此您希望它非常易于访问。关闭了 javascript 的用户（也可以考虑移动浏览器）或使用屏幕阅读器的任何人都将无法使用您的菜单。
Try viewing: http://www.htmldog.com/articles/suckerfish/dropdowns/
尝试查看：http: //www.htmldog.com/articles/suckerfish/dropdowns/
It is a CSS solution for multi-dropdown menus that should work out great.
它是一个用于多下拉菜单的 CSS 解决方案，效果很好。
回答by jrosell
For those who use class instead of using id, this is the code it works for me:
对于那些使用 class 而不是使用 id 的人，这是对我有用的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id='menu_box'>
<ul class='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>
</ul>
</div>
<script>
$('#menu_box ul li ul').hide();
$('#menu_box ul li').hover(function() {
$(this).find('ul').show();
},
function() {
$(this).find('ul').hide();
});
</script>
回答by dreadwail
You may find it useful to make your root element a block level element, and perform your event handling in that context.
您可能会发现将根元素设为块级元素并在该上下文中执行事件处理很有用。
