作者:友尔哥_398 | 来源:互联网 | 2023-09-24 12:46
假设我有自定义下拉列表().单击按钮时,我想调出菜单,当用户点击菜单外部时,我希望它关闭.所以我这样做:$(myDropDown).mousedown(dropDownMouseD
假设我有自定义下拉列表().单击按钮时,我想调出菜单,当用户点击菜单外部时,我希望它关闭.所以我这样做:
$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(htmlMouseDown,myDropDown);
function dropDownMouseDown(event) {
event.target.open();
event.stopPropagation();//I need this line or else htmlMouseDown will be called immediately causing the dropDown-menu to close right before its opened
}
function htmlMouseDown() {
this.close();
}
嗯,这很有效.但是,如果我添加其中两个呢?如果我点击打开第一个,那么第二个相同然后两个都将打开,因为dropDownMouseDown停止传播,所以htmlMouseDown永远不会被调用第一个.
我该如何解决这个问题?
如果我只有这两个,那么添加一些逻辑当然很容易,但如果数量是动态的?另外我可能不想调用event.stopPropagation(),因为它会对我正在使用的其他库也会有什么奇怪的东西来监听那个事件呢?
我也尝试过这一行:
$( “HTML”).鼠标按下(htmlMouseDown,myDropDown)
在dropDownMouseDown-handler中,但是一旦冒泡到达html元素,它将立即被调用.
解决方法:
假设你有一个你的投影选择器,(让我们说“.dropdown”),我会尝试使用’.not()’
$('.dropdown').mousedown(dropDownMouseDown);
$("html").on('mousedown', htmlMouseDown);
function dropDownMouseDown(event) {
event.target.open();
}
function htmlMouseDown(event) {
$('.dropdown').not($(event.target)).close();
}
这里有一个与css类相同的小提琴:
http://jsfiddle.net/eFEL6/4/