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);
});

jQuery淡出不起作用

1 个答案: