Question

我可以通过点击淡入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>

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

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

3 个答案: