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(); });