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

 

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

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

Bootstrap中的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