Question

仍然试图找出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添加一点延迟没有问题。

Answer 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()有两个参数 - 当您鼠标移动时会发生什么以及当您将鼠标移出时会发生什么。

Answer 2

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

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

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

Answer 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>

Answer 4

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

CSS / Jquery显示hide子菜单

4 个答案: