Question

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

$('.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函数必须处理按钮上的单击（quicklinks-rollover）。如果修复整个事情： 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();
    }
});

请记住这两件事：

使用ID更快地引用项目并防止多次弹出式冲突
建议不要在整个页面上使用鼠标事件，因为事件会频繁触发，尝试使用其他方法，例如在弹出窗口中添加关闭按钮，或者更有效，请考虑添加mouseup监听器在弹出窗口的显示上并将其移除到隐藏处。

您可以使用以下命令确定弹出窗口的状态：$（popup）.is（'：visible'）或is（'：hidden'）。

Answer 2

尝试：

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();
    }
});

Answer 3

你可以这样做普通的隐藏和显示方法。因为大多数toggle（）函数都不能正常工作......

默认使用属性p =“closed”的HTML按钮：

      <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

出现这种行为的原因是，当我在div上执行mouseup()时，click()被绑定了。您可以在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();
    }
});

Working Fiddle

jQuery按钮切换

4 个答案: