bootstrap下拉鼠标上的菜单项事件处理停止下拉关闭 [英] bootstrap dropdown on mouse over the menu item event handling stops dropdown closing

问题描述

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

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

My requirement is, change,edit,remove event should be fired separately and icon alignment in right side not in bottom and dropdown should be closed after event handling done.

下面的按钮对齐是正确的，但它会触发两个事件点击编辑图标，然后触发edit（）和change（））

Below button alignment is correct, but it is triggering two events.(ie., if i clicked edit icon then it is triggering edit() and 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 />

下面的按钮功能完美，但对齐不在右侧

Below button works perfectly, but alignment is not in right side

<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

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

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

推荐答案

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

Make use of e.cancelBubble = true; instead of e.stopPropogation() since it is a jquery event generated function. Force manual toggle of dropdown to open and close onclick. Use bootstrap class pull-right to right align the 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

JSFIDDLE

这篇关于bootstrap下拉鼠标上的菜单项事件处理停止下拉关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！