CSS/Jquery 显示隐藏子菜单答案

【问题标题】：CSS/Jquery to show hide submenuCSS/Jquery 显示隐藏子菜单
【发布时间】：2009-06-03 22:02:22
【问题描述】：

仍在尝试找出 jQuery，我需要一些关于侧边栏列表的帮助。

我在尝试了一些东西后正在编辑它。

我试图隐藏子菜单，直到将鼠标悬停在特定列表项上，然后另一个菜单出现在侧边栏的一侧，您可以将鼠标悬停在这些选择上。我到了一半，但是当您将鼠标移出时，它会在您将鼠标悬停在任何项目上之前消失。我将添加 hoverIntent 但我认为这不是问题，因为我需要整个隐藏块也成为显示该元素的触发器。我在下面尝试了 Steerpikes 解决方案，但它导致整个主列表在鼠标移出后消失。

这是现在的结构：

<ul>
<li>Always Showing Element</li>
<li class="trigger">Title that triggers Submenu
<ul>
<li>
Hidden Menu
</li>
</ul>
</li>
</ul>

和脚本

$('li.trigger ul').hide();
 $('li.trigger').hover(function() {
$('li.trigger ul').show();
},
function() {
      $('li.trigger ul').hide();
});

那么当我的鼠标悬停在 li.trigger ul li elementes 上时，我怎样才能让它保持显示呢？

感谢您的帮助！

没关系...现在可以了，我刚刚关闭了定位，但现在它有点重叠，并且 hoverintent 增加了一点延迟没有问题。

【问题讨论】：

标签： jquery css

【解决方案1】：

以下应该可以工作。我刚刚在 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();
});

请记住，hover() 有两个参数 - 鼠标移入时会发生什么，鼠标移出时会发生什么。

【讨论】：

嗯.. 不适合我。当我将鼠标移出时，整个列表会消失，而不仅仅是子菜单
哦，好吧，我明白了：$('li#pages ul li ul').hide(); $('li#pages').hover(function() { $('li#pages ul li ul').show();}, function() { $('li#pages ul li ul').hide ();});

【解决方案2】：

我会考虑使用 CSS 来实现此功能。由于这是一个菜单，您希望它易于访问。关闭了 javascript 的用户（也可以考虑移动浏览器）或使用屏幕阅读器的任何人都将无法使用您的菜单。

尝试查看：http://www.htmldog.com/articles/suckerfish/dropdowns/

这是一个多下拉菜单的 CSS 解决方案，效果应该很好。

【讨论】：

【解决方案3】：

对于那些使用 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>

【讨论】：

【解决方案4】：

您可能会发现将根元素设为块级元素并在该上下文中执行事件处理很有用。

【讨论】：