<!-- 悬浮显示二级菜单 -->
<script type="text/javascript">
$("#first-menu").mouseover(function(){
$("#second-menu").show();
})
$("#second-menu").mouseover(function(){
$(this).show();
})
$("#first-menu").mouseout(function(){
$("#second-menu").hide();
})
$("#second-menu").mouseout(function(){
$(this).hide();
})
</script>一级菜单id = first-menu
二级菜单id = second-menu
isShow表示二级菜单是否显示,初始值设置为false
这段代码关键在于鼠标从一级菜单移动到二级菜单时会同时执行$("#first-menu").mouseout()和$("#second-menu").mouseover(),所以在first-menu和second-menu上分别设置show和hide就可以。
本文介绍了一种使用JavaScript实现的当鼠标悬停在一级菜单上时显示二级菜单的方法。通过设置鼠标移入移出事件来控制二级菜单的显示与隐藏,有效解决了菜单交互设计中的常见需求。
2147

被折叠的 条评论
为什么被折叠?



