Question

小提琴链接：https://jsfiddle.net/kumkanillam/6v4d7kg9/1/

我的要求是，更改，编辑，删除事件应该单独触发，右侧的图标对齐不在底部，并且在事件处理完成后应该关闭下拉列表。

HTML

按钮对齐方式正确，但它触发两个事件。（即，如果我点击编辑图标，则触发编辑（）和更改（））

<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右对齐glyphicons

<强> 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

鼠标悬停在菜单项事件处理上的引导下拉停止下拉关闭

HTML

的Javascript

CSS

1 个答案: