bootstrap去掉下拉菜单自带点击事件,第一次点击时展开菜单,第二次点击时收起菜单,有的时候我们不需要它提供的点击事件,比如我们在做鼠标放上显示展开菜单的功能时,当鼠标放上菜单展开此时在进行单击菜单会收起,这样感觉很别扭,以下方法实现了鼠标放上显示菜单且去掉点击事件
html代码
<li class="active" id="dropdown">
<a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="backcolor">
Tools <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/tools-json-formatted.html">JSON formatted</a></li>
<li><a href="#">Unix time formatted</a></li>
<li><a href="#">MD5 fncrypt</a></li>
<li><a href="#">JS Encryption and decryption</a></li>
<li><a href="#">Send HTTP request</a></li>
</ul>
</li>
鼠标放上展开菜单
$('#dropdown').mouseover(function() {
$(this).addClass('open');
$("#backcolor").css({"background-color":"#a63f16"});
}).mouseout(function() {
$(this).removeClass('open');
if($(this).attr("class") != 'active') {
$("#backcolor").css({"background-color": "#206494"});
}
});
去掉菜单的点击事件
$('#backcolor').click(function(e) {
e.stopPropagation();
});