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

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

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

HTML

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

 Inside Anchor Tag  
 
HTML
 
CSS
 
JavaScript
 
 
 
 

按钮下方工作完美，但对齐不在右侧

 
 Outside Anchor Tag  
 
HTML
 
CSS
 
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

 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