Javascript 使用相同的链接单击淡入淡出div

我可以通过单击淡入一个div，但如何使用相同的单击来切换该div，即单击淡入一个div，然后在第二次单击淡出一个div

我想导航栏切换被点击一次打开覆盖，再次点击淡出覆盖

<script>

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

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

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

});
</script>

$（文档）.ready（函数（e）{
$（'.navbar toggle'）。单击（函数（e）{
$（'.overlay，.popup'）.fadeIn（'slow'）；
});
$（'.navbar toggle'）。单击（函数（e）{
$（'.overlay，.popup'）.fadeIn（'slow'）；
});
});

只需使用

切换

并将元素绑定到一个事件处理程序：

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

---

您可以通过以下两种方式实现：

解决方案1:

使用

toggle（）

解决方案2:

使用

fadeToggle（）

解决方案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();    
});

---

查看小提琴：

你能显示你的html吗

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