Fade div in и out, используя ту же самую ссылку onclick

Question

Я могу пометить div одним щелчком мыши, но как я могу использовать один и тот же щелчок, чтобы переключить этот div, т. Е. Затухать div на клик, а затем исчезать div на втором нажмите кнопку.

Я бы хотел, чтобы navbar-toggle был нажат один раз, чтобы открыть оверлей и снова щелкнул, чтобы исчезнуть наложение.

<script> 

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

    $('.navbar-toggle').click(function(e){  
    $('.overlay, .popup').fadeIn('slow'); 
    }); 

    $('.navbar-toggle').click(function(e){   
    $('.overlay, .popup').fadeIn('slow'); 
    }); 

}); 
</script> 

Answer 1

Вы можете сделать это несколько способов:

Решение 1:

Использование toggle()

$('.navbar-toggle').click(function(e){  
    $('.overlay, .popup').toggle('fast'); 
}); 

JSFiddle Demo

Решение 2:

Использование fadeToggle()

$('.navbar-toggle').click(function(e){  
    $('.overlay, .popup').fadeToggle(300); 
}); 

JSFiddle Demo

Решение 3:

Есть скрытый класс и проверить, чтобы увидеть, если он существует

Answer 2

Просто используйте toggle и привязать ваш элемент к одному обработчику событий:

$('.navbar-toggle').click(function(e){  
    $('.overlay, .popup').toggle('slow'); 
}); 

Answer 3

он также может быть использован как это, путем проверки текущего состояния элемента

$('.navbar-toggle').click(function(e){  
    if($('.overlay, .popup').css('display')=='none') 
    { 
     $(".overlay, .popup").fadeIn();   
    } 
    else 
    { 
     $(".overlay, .popup").fadeOut();    
    } 
}); 

Или по удаление фигурные скобки из-за того, в одной строке, как этот

$('.navbar-toggle').click(function(e){  
    if($('.overlay, .popup').css('display')=='none') 
     $(".overlay, .popup").fadeIn(); 
    else 
     $(".overlay, .popup").fadeOut();  
}); 

Отъезд скрипка: JSFiddle