bootstrap怎么设置下拉菜单不点击，改成⿏标悬停直接显⽰下
js导航栏下拉菜单
拉菜单
⽅法⼀：
实际上⽐较简单，只需要加⼀个css设置下hover的状态，把下拉菜单设置成block，具体css：
.nav
> li:hover .dropdown-menu {display: block;}
但是主导航失去链接的效果！
⽅法⼆：
不仅可以解决Bootstrap⿏标悬停的问题，还可以让⼀个菜单恢复链接实现点击
下拉菜单效果是JS实现的，分析bootstrap.js⽂件发现，Bootstrap把下拉菜单写成了⼀个JQuery插件，在dropdown代码段中到了关键的⼏句：
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api'  , toggle, le)
.on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
把其中的click.bs.dropdown.data-api事件关闭就好，代码如下：
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api');
});
这样可以让⼀级菜单恢复href属性，起到超链接功能。
⾄于下拉菜单悬浮，⿏标放上就显⽰，按照楼上的⽅法就好。或者⽤js来实现：
$(document).ready(function(){
dropdownOpen();//调⽤
});
/**
* ⿏标划过就展开⼦菜单，免得需要点击才能展开
*/
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$useover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。