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

嘗試：

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（）函數不會以適當的方式工作...

默認情況下，將HTML按鈕的屬性設為p =“ closed”：

      <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上執行click()時， mouseup()被綁定。 您可以通過在.mouseup事件中添加console.log消息來檢查此行為。

因此，請嘗試如下操作。

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

工作小提琴