javascript - 鼠标悬停在菜单项事件处理上的 Bootstrap 下拉菜单停止下拉菜单关闭

Question

fiddle 播放链接:https://jsfiddle.net/kumkanillam/6v4d7kg9/1/

我的要求是，change、edit、remove 事件应该单独触发，并且在事件处理完成后应该关闭右侧而不是底部的图标对齐和下拉列表。

html

下面的按钮对齐是正确的，但它触发了两个事件。(即，如果我点击编辑图标然后它触发 edit() 和 change())

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Inside Anchor Tag
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#" onclick="change()">HTML<i onclick="edit()" class="glyphicon glyphicon-edit"></i><i onclick="remove()"class="glyphicon glyphicon-trash"></i></a></li>
      <li><a href="#" onclick="change()">CSS<i onclick="edit()" class="glyphicon glyphicon-edit"></i><i onclick="remove()"class="glyphicon glyphicon-trash"></i></a></li>
      <li><a href="#" onclick="change()">JavaScript<i onclick="edit()" class="glyphicon glyphicon-edit"></i><i onclick="remove()"class="glyphicon glyphicon-trash"></i></a></li>
    </ul>   
  </div>
  <br />

下方按钮工作正常，但对齐方式不在右侧

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Outside Anchor Tag
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#" onclick="change()">HTML</a><i onclick="edit()"class="glyphicon glyphicon-edit"></i><i onclick="remove()"class="glyphicon glyphicon-trash"></i></li>
      <li><a href="#" onclick="change()">CSS</a><i onclick="edit()"class="glyphicon glyphicon-edit"></i><i onclick="remove()"class="glyphicon glyphicon-trash"></i></li>
      <li><a href="#" onclick="change()">JavaScript</a> <i onclick="edit()"class="glyphicon glyphicon-edit"></i><i onclick="remove()"class="glyphicon glyphicon-trash"></i></li>
    </ul>   
  </div> 

Javascript

function change(){        
    console.log('change');
}
function edit(){
    //i tried event.stopPropagation() - thats leaving me to close dropdown.
    console.log('edit');
}
function remove(){
    console.log('remove');
}

CSS

ul>li>a:hover i{
 display:block !important;
 float:right !important;
}
ul>li>a>i{
 display:none !important;
}
.glyphicon-edit{
padding-left:7%;
}

ul>li:hover i{
 display:block !important;
 float:right !important;
}
ul>li>i{
 display:none !important;
}

Answer 1

使用 e.cancelBubble = true; 而不是 e.stopPropogation() 因为它是一个 jquery 事件生成函数。强制手动切换下拉菜单以打开和关闭 onclick。使用 Bootstrap 类 pull-right 右对齐字形

JS

function change(){

   console.log('change');
}
function edit(e){
  e.cancelBubble = true;
  $('.dropdown-menu').slideUp("fast");
    console.log('edit');
}
function remove(e){
console.log('here remo');
     e.cancelBubble = true;
   $('.dropdown-menu').slideUp("fast");
    console.log('remove');
}
$(function(){
$(".dropdown").click(function(){
console.log("here");
     $(this).find(".dropdown-menu").slideToggle("fast");
});

})

JSFIDDLE