當單擊任何位置時，jQuery隱藏下拉菜單，但菜單

我正在嘗試使下拉菜單顯示您單擊按鈕時的內容，並隱藏當您單擊下拉菜單中的任何位置時隱藏下拉菜單。當單擊任何位置時，jQuery隱藏下拉菜單，但菜單

我有一些代碼工作，只要不點擊菜單時關閉，但是當菜單關閉時單擊文檔時，它會顯示菜單，因此無論點擊的位置如何都會持續切換。

$(document).click(function(event) { 
    if ($(event.target).parents().index($('.notification-container')) == -1) { 
     if ($('.notification-container').is(":visible")) { 
      $('.notification-container').animate({ 
       "margin-top": "-15px" 
      }, 75, function() { 
       $(this).fadeOut(75) 
      }); 
     } else { 
      //This should only show when you click: ".notification-button" not document 
      $('.notification-container').show().animate({ 
       "margin-top": "0px" 
      }, 75); 
     } 
    } 
});

來源

2012-01-10 Dylan Cross

描述你的代碼;它將click事件綁定到整個'document'文件，當觸發該事件時，它檢查目標（clicked）元素是否具有類「.notification-container」的父類，如果是，則檢查是否有該類的元素是可見的。如果是這樣，它會隱藏（動畫）所有具有「.notification-container」類的元素，否則它會顯示（動畫）它們。 – Stefan 2012-01-10 11:39:13

最好的解決方案是[stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element] [1]。 [1]：http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element – lightofsouls 2013-06-28 08:31:27

嗨，老兄，你能不能接受一個答案？ :) – epoch 2016-05-06 07:08:37

這是我決定使用的，這是一個很好的小jQuery插件，只需少量代碼。

這裏的插件： http://benalman.com/projects/jquery-outside-events-plugin/

這是使我上面的代碼在我的問題的工作的代碼。

$(document).ready(function(){ 
    $(".notification-button").click(function(){ 
     $('.notification-container').toggle().animate({"margin-top":"0px"}, 75); 
    }); 

    $('.notification-wrapper').bind('clickoutside', function (event) { 
     $('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)}); 
    }); 
});

來源

2012-01-10 20:42:08

我經常這樣做：

$('.drop-down').click(function() { 
    // The code to open the dropdown 

    $('body').click(function() { 
     // The code to close the dropdown 
    }); 
});

所以，把你的身體（其他地方）點擊下拉點擊打開函數內部功能。

來源

2012-01-10 08:48:00

這似乎仍然與我目前的代碼相同，奇怪。但是，謝謝 – 2012-01-10 09:00:14

jQuery的closest()功能可以用來看看如果點擊是不是在菜單中：

$('body').click(function(e) { 
    if ($(e.target).closest('.notification-container').length === 0) { 
     // close/animate your div 
    } 
});

來源

2012-01-10 08:48:50 epoch

我無法按預期工作，它的功能與我當前的代碼一樣 – 2012-01-10 08:59:46

這很簡單，效果很好。你可能需要考慮添加點擊事件到html而不是body，以防你的頁面不能填充視口的全部高度 – 2014-02-28 19:14:15

這個工作很棒:) – mshahbazm 2014-07-31 17:59:22

嘗試類似：

$(document).click(function(event) { 

if($(event.target).parents().index($('.notification-container')) == -1) { 
    if($('.notification-container').is(":visible")) { 
     $('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)}); 
    } 
}   
}); 

$(".notification-button").click(function(event){ 
    event.stopPropagation(); 
    $('.notification-container').show().animate({"margin-top":"0px"}, 75); 
});

來源

2012-01-10 08:49:29 redmoon7777

是的，我試過這個，它根本不起作用。 – 2012-01-10 08:55:25

很奇怪。如果你可以在http://jsfiddle.net/上發佈你的代碼的相關部分，這將更容易計算出 – redmoon7777 2012-01-10 09:31:32

你可以做這樣的事情，如果你的產品不點擊然後隱藏其下拉列表以防掉落

$(':not(#country)').click(function() { 
    $('#countrylist').hide(); 
});

來源

2012-01-10 09:15:26

我以前做過這個，但它從來沒有完全正確 – 2012-01-10 20:37:30

嘗試th是：

// The code to close the dropdown 
$(document).click(function() { 
    ... 
}); 

// The code to open the dropdown 
$(".drop-down").click(function() { 
    ... 
    return false; 
});

來源

2012-01-10 09:42:03

這可能不是一個完整的解決方案，但從來就創造了一個demo來幫助你。讓我知道它不像你期望的那樣工作。

$(document).click(function(e) { 

    var isModalBox = (e.target.className == 'modal-box'); 

    if (!isModalBox) { 
     $('.modal-box:visible').animate({ 
      "margin-top": "-15px" 
     }, 75, function() { 
      $(this).fadeOut(75); 
     }); 
    } 
}); 

$('a').click(function(e) { 
    e.stopPropagation(); // Important if you´d like other links to work as usual. 
}); 

$('#temp-button').click(function(e) { 
    e.preventDefault(); 
    $('.modal-box').show().animate({ 
     "margin-top": "0px" 
    }, 75); 
});

來源

2012-01-10 10:19:26 Stefan

這似乎工作，因爲它應該在你的小提琴演示中，謝謝。但是我發現了一個完美的插件，代碼少了，我會把它作爲我的答案發布。 – 2012-01-10 20:39:31

我用一個非常簡單的代碼，這是： -

$(document).click(function(e){ 

    if($(e.target).closest('#dropdownID').length != 0) return false; 
    $('#dropdownID').hide(); 
});

希望這將是有用的。

謝謝！

來源

2013-03-29 10:36:58

當單擊任何位置時，jQuery隱藏下拉菜單，但菜單

回答

相關問題