Bootstrap鼠标悬停展开子菜单
程序员文章站
2023-12-28 21:40:40
...
Bootstrap中的导航条默认鼠标点击才会显示子菜单,可以通过如下脚本修改默认行为,使得鼠标悬停展开子菜单
<script>
$(function(){
//鼠标移入和移出,显示或隐藏子菜单
$("li.dropdown").mouseover(function () {
$(this).children(".dropdown-menu").show();
}).mouseout(function () {
$(this).children(".dropdown-menu").hide();
});
//点击子菜单项的时候隐藏子菜单
$(".dropdown-item").click(function () {
$(this).parent(".dropdown-menu").hide();
});
});
</script>
推荐阅读
-
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
-
Bootstrap鼠标悬停展开子菜单
-
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
-
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
-
Win10 19H1继续调优开始菜单:鼠标悬停即可自动展开二级目录
-
ElementUI的NavMenu 导航菜单水平展开左侧菜单时,默认打开子菜单(open方法:手动打开子菜单)
-
Win10 19H1继续调优开始菜单:鼠标悬停即可自动展开二级目录
-
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果_javascript技巧
-
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
-
Javascript仿游戏网站特效鼠标悬停显示子菜单