JQuery «показать/скрыть DIV по щелчку» и «нажмите на улицу, чтобы скрыть» не работает вместе

Question

// Я не искал, но не повезло, так что я начинаю новый вопрос :)

у меня есть:

<a class="icon hide-text" id="btnNoti5" href="#">Notification</a>

Я хочу, чтобы: Когда я нажимаю на это a, он отобразит/спрячет div и когда я нахожусь за пределами этого div, если он виден, он скрывается.

Я использую этот код для отображения/скрытия. Он отлично работает:

var divNotifi = $('#divNotifi'); 
$('#btnNoti5').click(function(e) 
{ 
    if (divNotifi.is(":visible")) 
    {   
     divNotifi.hide(); 
    } 
    else 
    {   
     divNotifi.show(); 
    } 
} 

Но когда я добавить этот код, чтобы скрыть DIV, когда пользователь нажмет на улице, он на самом деле работает, но выше код перестал работать: Первый щелчок, это показать DIV. Второй щелчок: ничего не происходит. Див не был скрыт, как ожидалось.

$(document).mouseup(function (e) 
{ 
    var container = $("#divNotifi"); 
    if (container.has(e.target).length == 0) 
    { 
     container.hide(); 
    } 
}); 

Пожалуйста, помогите мне. Большое спасибо.

Answer 1

Используйте то же событие для того, чтобы остановить его распространение

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

$('#btnNoti5').click(function(e) 
{ 
    if (divNotifi.is(":visible")) 
    {   
     divNotifi.hide(); 
    } 
    else 
    {  
     divNotifi.show(); 
    } 
    return false; 
}); 

Answer 2

$("#btnNoti5").click(function(){ 
    $("#notify").show(); 
}); 

$("#notify").click(function(){ 
    $("#notify").hide(); 
}); 

Answer 3

$(document).on('click', function(e) { 
    var elem = $(e.target).closest('#btnNoti5'), 
     box = $(e.target).closest('#divNotifi'); 

    if (elem.length) {   // the anchor was clicked 
     e.preventDefault();  // prevent the default action 
     $('#divNotifi').toggle(); // toggle visibility 
    }else if (!box.length){  // the document, but not the anchor or the div 
     $('#divNotifi').hide(); // was clicked, hide it ! 
    } 
}); 

FIDDLE

Answer 4

Существует трюк я хотел бы использовать для вещи, такие как это.

в библиотеке Jquery:

$('#div').addClass('Class-Name'); 

всякий раз, когда это шоу - добавить класс под названием "шоу".

и чем для проверки, если он показывает:

if ($('#div').hasClass('Class-Name')) 
{ 
    // some actions 
} 

.hasClass() также является частью библиотеки JQuery. и последняя функция из библиотеки JQuery является: .removeClass()

так, что я делаю это:

когда шоу - добавить класс «шоу» по щелчку - проверить, имеет класс «шоу» и чем удалить класс ,

надеюсь, что вы найдете свой путь, используя мой трюк :)

это делает его очень легко сделать вещи, когда они так графические. Мне не очень нравится мой метод, но я делаю, это держит вас подальше от беспорядка.