javascript - jQuery 按钮切换

Question

我有一个切换菜单弹出的按钮。如果您在菜单外单击，我可以使菜单消失，但现在我的按钮切换不起作用。如果我再次单击该按钮，菜单将保持不变。如果您切换按钮或单击容器，如何使菜单消失？

jsFiddle：http: //jsfiddle.net/PPcfN/

$('.quicklinks-rollover').click(function () {
    $('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
    var container = $(".quicklinks");
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Answer 1

mouseup 函数必须负责单击按钮（快速链接翻转）。如果在这里修复了整个事情：http: //jsfiddle.net/8VUnq/1/

$(document).mouseup(function (e) {
    var popup = $('#quickLinksPopup'),
        button = $('#quickLinksToggle');
    if (popup.is(':visible')
        && !popup.is(e.target)
        && !button.is(e.target)
        && popup.has(e.target).length === 0
        && button.has(e.target).length === 0) {
        popup.toggle();
    }
});

请记住以下两点：

1. 使用 ID 更快地引用项目并防止多个弹出冲突
2. 不建议在整个页面上使用鼠标事件，因为该事件会被非常频繁地触发，尝试使用替代方法，例如在弹出窗口中添加关闭按钮，或者更有效，考虑在节目中添加 mouseup 监听器弹出窗口并在隐藏处将其删除。

您可以使用 $(popup).is(':visible') 或 is(':hidden') 来确定弹出窗口的状态。

Answer 2

这种行为的原因mouseup()是当我click()在 div 上执行时绑定的。您可以通过在事件中添加console.log消息来检查此行为。.mouseup

因此，请尝试如下所示。

$('.quicklinks-rollover').on('click', function (e) {
    $('.quicklinks').toggle();
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    var container = $(".quicklinks");
    console.log(container.has(e.target).length);
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

工作小提琴

Answer 3

您可以执行此普通隐藏和显示方法。因为大多数toggle（）函数不会以正确的方式工作......

默认情况下，将您的 HTML 按钮设置为 p="close" 属性：

      <button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>

更改您的 Jquery：

         $('.quicklinks-rollover').click(function () {
             var a = $(this).attr("p");
             var container = $(".quicklinks");
             if(a=="closed"){
              container.show();
              $(this).attr("p","open");
            }else{
              container.hide();
              $(this).attr("p","closed");
            }
       });
     $(document).mouseup(function (e) {
       var container = $(".quicklinks");
       if (container.has(e.target).length === 0) {
           container.hide();
       }
     });

Answer 4

尝试 ：

var $quicklinks = $('.quicklinks');
var msOverLinks = false;

$('.quicklinks-rollover').click(function () {
    $quicklinks.toggle();
});

$quicklinks.mouseenter(function() {
    msOverLinks = true;
}).mouseleave(function() {
    msOverLinks = false;
});

$(document).mouseup(function (e) {
    if( ! msOverLinks ) {
        $quicklinks.toggle();
    }
});