jQuery ẩn danh sách thả xuống khi được nhấp vào bất kỳ đâu nhưng menu

Question

Tôi đang cố gắng làm cho trình đơn thả xuống của tôi hiển thị khi bạn nhấp vào nút và ẩn khi bạn nhấp vào bất kỳ đâu ngoại trừ trình đơn thả xuống.

Tôi có một số mã hoạt động, miễn là bạn không đóng khi bạn nhấp vào menu, tuy nhiên khi bạn nhấp vào tài liệu khi menu được đóng, trình đơn sẽ hiển thị menu, vì vậy nó liên tục chuyển đổi bất kể bạn nhấp vào đâu.

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

Answer 1

Đây là những gì tôi đã quyết định sử dụng, đó là một plugin jQuery nhỏ tuyệt vời hoạt động với ít mã.

Đây là plugin: http://benalman.com/projects/jquery-outside-events-plugin/

Đây là mã mà làm cho mã trên của tôi trong công việc câu hỏi của tôi.

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

Answer 2

Tôi thường làm như thế này:

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

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

Vì vậy, đặt cơ thể của bạn (ở nơi khác) bấm chức năng bên trong trình đơn thả xuống chức năng mở nhấp chuột.

Answer 3

closest() chức năng của jQuery có thể được sử dụng để xem các nhấp chuột không nằm trong menu:

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

Answer 4

thử một cái gì đó như:

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

Answer 5

bạn có thể làm một cái gì đó như thế này nếu hàng của bạn không phải là sau đó nhấp vào danh sách thả của nó trong trường hợp thả xuống

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

Answer 6

Hãy thử thứ là:

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

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

Answer 7

Điều này có thể không phải là một giải pháp hoàn chỉnh nhưng Tôi đã tạo ra một demo để giúp bạn ra ngoài. Hãy cho tôi biết nó không hoạt động như bạn mong đợi.

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

Answer 8

Tôi đang sử dụng một mã rất đơn giản cho điều này như sau: -

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

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

Hy vọng nó sẽ hữu ích.

Cảm ơn !!