CSS/jquery显示隐藏子菜单

仍试图找出jQuery，我需要一些帮助与侧栏列表。CSS/jquery显示隐藏子菜单

我在尝试一些东西后编辑这个。

我想隐藏子菜单，直到特定的列表项被隐藏，然后另一个菜单出现在侧边栏的一侧，您可以将鼠标悬停在这些选择上。我在那里一半，但当你mouseout它消失之前，你可以鼠标悬停任何项目。我将添加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李elementes？

感谢您的帮助！

没关系...现在这个工作，我只是有了定位，但现在它重叠了一点，并与hoverintent增加了一点延迟没有问题。

来源

2009-06-03 Zac

该follwing应该工作。我只写类似的东西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()有两个参数 - 当你的鼠标会发生什么，当你的鼠标会发生什么了。

来源

2009-06-03 22:11:02 Steerpike

嗯..不是为我工作。当我将鼠标移出整个列表时，消失的不仅仅是子菜单 – Zac 2009-06-03 22:56:26

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

来源

2009-06-03 22:19:14

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

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

这是多下拉菜单一个CSS的解决方案，应该制定出巨大。

来源

2009-06-04 16:52:55

对于那些谁使用，而不是使用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>

来源

2010-12-21 10:42:14 jrosell

CSS/jquery显示隐藏子菜单

回答

相关问题