jQuery Toggle函数与Mouseup冲突 [英] jQuery Toggle function conflicts with Mouseup

问题描述

我正在尝试创建一个下拉菜单，该菜单可以通过切换按钮打开和关闭，也可以通过单击文档本身上的任意位置来关闭它.

I'm trying to create a dropdown menu which can be opened and closed with a Toggle button and it can be closed by clicking anywhere on the document itself as well.

当某人单击切换"按钮时，菜单将正确打开.如果访问者随后在文档上的其他任何位置单击，菜单将关闭，但将需要 2次点击才能再次激活该按钮的Toggle功能.我想再次将其减少到 1点击.

When a person clicks on the Toggle button, the menu opens properly. If a visitor then clicks anywhere else on the document, the menu closes but it takes 2 clicks to activate the Toggle function of that button again. I'd like to reduce that to 1 click again, of course.

为此问题查看 http://jsfiddle.net/MEweN/3/.有人可以帮我吗?

Check out http://jsfiddle.net/MEweN/3/ for this issue. Can anyone help me out please?

推荐答案

切换将其状态保存在调用它的对象上.每次调用Toggle时，它都会在功能1和功能2之间切换.它对您的应用程序一无所知.每次调用它时，它只是在您传递的两个函数之间交替.

Toggle saves it's state on the object you call it on. Each time you call Toggle, it alternates between function 1 and function 2. It knows nothing else about your app. It just alternates between the two functions you pass it each time you call it.

在不使用Toggle的情况下重置弹出窗口的状态时，它不同步，因为它现在不知道您想回到第一个状态.因此，当您再次单击时，它会在您希望执行第一个功能时执行第二个功能.

When you reset the state of the popup without using Toggle, it gets out of sync as it now has no idea that you want to go back to the first state. So, when you click again, it executes the second function when you want it to execute the first function.

解决此问题的最佳方法是使用比Toggle更智能的工具.您需要检测弹出窗口是否处于打开状态并采取相应的措施，或者存储有关该弹出窗口是否处于打开状态的状态.您不能使用Toggle，因为它对您的应用程序不够智能.

The best way to solve this problem is to use something smarter than Toggle. You need to either detect whether the popup is open and act accordingly or store some state on whether it's open or not. You can't use Toggle because it isn't smart enough for your application.

在使用您的实际代码时，我还发现处理文档中的mouseup事件与处理对象中的click事件不是很兼容.问题是mouseup出现在单击之前，因此您将依次获得两个事件，而不会获得想要的效果.当我在文档中更改为单击时，它的工作就这样简单得多:

In working with your actual code, I also found that handling the mouseup event in the document is not very compatible with handling the click event in the object. The issue is that mouseup comes before click so you would get both events in sequence and you wouldn't get the effect you want. When I changed to a click in the document, it worked a lot easier like this:

$("#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/

这篇关于jQuery Toggle函数与Mouseup冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！