Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

最新推荐文章于 2024-08-12 08:31:07 发布

原创最新推荐文章于 2024-08-12 08:31:07 发布 · 4.2k 阅读

6 ·

CC 4.0 BY-SA版权

在使用bootstrap制作后台时用到了响应式导航条，其中dropdown组件更是用的比较多，用的多需要点击的就多，dropdown默认鼠标左键单击才展开，如果使用鼠标放上去（hover）就展开则会省去点击时间，这样能提高效率。

//关闭click.bs.dropdown.data-api事件，使顶级菜单可点击

$(document).ready(function(){
 $(document).off('click.bs.dropdown.data-api');
});



$(document).ready(function(){
 dropdownOpen();//调用
});
/**
 * 鼠标划过就展开子菜单，免得需要点击才能展开
 */
function dropdownOpen() {
 
 var $dropdownLi = $('li.dropdown');
 
 $dropdownLi.mouseover(function() {
 $(this).addClass('open');
 }).mouseout(function() {
 $(this).removeClass('open');
 });
}

原文链接：https://www.jb51.net/article/91609.htm

https://www.jb51.net/article/82383.htm

https://www.jb51.net/article/90763.htm