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;
}
最佳答案
使用 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");
});
})
关于javascript - 鼠标悬停在菜单项事件处理上的 Bootstrap 下拉菜单停止下拉菜单关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38844709/