jQuery的淡出不工作

Question

我有這個按鈕與ID「觸發」在那裏我觸發疊加層時已被點擊就可以了。但是當再次點擊「觸發器」時，疊加層將不會關閉。任何人都知道問題是什麼？

我的代碼：

<script> 
    $(function() { 
    $('#trigger').click(function() { 
     $('#overlay').fadeIn(500); 
    }); 
    $('#overlay, .overlayFadeOut').click(function() { 
     $('#overlay').fadeOut(500); 
     $('.navbar-toggle').toggleClass("active"); 
    }); 
    }); 

</script> 

HTML

<div class="row"> 
    <div class="col-md-7 col-sm-6 col-xs-4"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="trigger" style="z-index: 99999999"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    </div> 
</div> 

</div> 
</section> 

<!-- overlay --> 
<div id="overlay" data-toggle="collapse" data-target=".navbar-collapse"></div> 

<!-- navigation --> 
<div class="nav-container"> 

    <nav class="navbar navbar-fixed-top" style="z-index: 10"> 

    <div class="navbar-header"> 
    </div> 

    <div class="navbar-collapse collapse"> 

     <div id="menu-outer"> 
     <div class="Table"> 
      <ul class="nav navbar-nav" id="horizontal-list"> 
      <li class="active overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="index.html">home</a></li> 
      <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Lorem</a></li> 
      <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Ipsum</a></li> 
      <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Dolor</a></li> 
      <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Sit</a></li> 
      </ul> 
     </div> 
     </div> 


    </div> 
    </nav> 

</div> 

Answer 1

只需使用toggle()或fadeToggle()來切換顯示風格。

$('#trigger').click(function(){ 
    $('#overlay').fadeToggle(500); 
});