bootstrap下拉菜单的鼠标放上显示与去掉点击事件

13th of February 2017 Javascript JS 2870

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

Label

Hot