我正在尝试创建一个下拉菜单,可以使用切换按钮打开和关闭它,也可以通过单击文档本身的任意位置来关闭它。
当一个人单击“切换”按钮时,菜单会正确打开。如果访问者随后单击文档上的任何其他位置,菜单将关闭,但需要单击 2 次才能再次激活该按钮的切换功能。当然,我想再次将其减少到1 次点击。
查看http://jsfiddle.net/MEweN/3/了解此问题。谁能帮帮我?
我正在尝试创建一个下拉菜单,可以使用切换按钮打开和关闭它,也可以通过单击文档本身的任意位置来关闭它。
当一个人单击“切换”按钮时,菜单会正确打开。如果访问者随后单击文档上的任何其他位置,菜单将关闭,但需要单击 2 次才能再次激活该按钮的切换功能。当然,我想再次将其减少到1 次点击。
查看http://jsfiddle.net/MEweN/3/了解此问题。谁能帮帮我?
Toggle 将其状态保存在您调用它的对象上。每次调用 Toggle 时,它都会在函数 1 和函数 2 之间交替。它对您的应用程序一无所知。它只是在您每次调用它时传递的两个函数之间交替。
当您在不使用 Toggle 的情况下重置弹出窗口的状态时,它会不同步,因为它现在不知道您想回到第一个状态。因此,当您再次单击时,它会在您希望它执行第一个功能时执行第二个功能。
解决这个问题的最好方法是使用比 Toggle 更智能的东西。您需要检测弹出窗口是否打开并采取相应措施,或者存储一些关于它是否打开的状态。您不能使用 Toggle,因为它对您的应用程序来说不够智能。
在使用您的实际代码时,我还发现处理文档中的 mouseup 事件与处理对象中的单击事件不太兼容。问题是 mouseup 在单击之前出现,因此您将按顺序获得这两个事件并且您不会获得您想要的效果。当我更改为在文档中单击时,它会像这样轻松得多:
$("#general_show").click(function () {
var $this = $(this);
if ($this.hasClass('selected')) {
$this.removeClass('selected').parent().next().hide();
} else {
$this.addClass('selected').parent().next().show();
}
return(false);
});
$(document).click(function (e) {
if ($('#general_info').is(':visible') &&
$(e.target).parents('#general_info').length === 0) {
$('#general_show').removeClass('selected').parent().next().hide();
return(false);
}
});
工作示例:http: //jsfiddle.net/jfriend00/KTNAq/
$("#general_show").click(function () {
if( $(this).is('.selected') ){
$(this).removeClass().parent().next().hide()
}else{
$(this).addClass('selected').parent().next().show()
}
});
$(document).mouseup(function (e) {
if (
$('#general_show').is('.selected')
&& $(e.target).parents('#general_info').length === 0
&& $(e.target).attr('id')!== "general_show"
) {
$('#general_show').click()
}
});
$("#general_show").click(function () {
if ( $('#general_info').is(':visible') ){
// Hiding informations
$(this).removeClass('selected').parent().next().hide(); // try to always pass argument to removeClass, which class you want to remove
} else {
// Showin informations
$(this).addClass('selected').parent().next().show();
}});
$(document).mouseup(function (e) {
// We don't want to use this function when clicked on button
if (e.target.id == 'general_show') return;
if ( $('#general_info').is(':visible') ){
$('#general_show').removeClass().parent().next().hide();
}
});
JSFiddle 链接:http: //jsfiddle.net/MEweN/5/