.addClass 当#mainNav :visible

Question

期望： 单击菜单按钮并且导航（#mainNav）滑入时，检查是否可见。如果是这样，.addClass .is-open to .nav-item。当导航 (#mainNav) 关闭时，.removeClass .is-open from .nav-item.

问题： 当导航可见（幻灯片）时，Class 未添加到 .nav-item。

HTML

<header>
  <!-- Logo and Burger -->
  <div class="brand-wrap">
    <div class="trigger-wrapper">
      <button id="burger">
        <div class="nav-trigger-line"></div>
        <div class="nav-trigger-line"></div>
        <div class="nav-trigger-line"></div>
      </button>
    </div>
  </div>
  <!-- End of Logo and Burger -->

  <!-- Navigation -->
  <nav id="mainNav" class="navbar main-nav">
    <div class="nav-container">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a href="company.html" class="nav-link"><span class="nav-number">01.</span><br>Our Company</a>
        </li>
        <li class="nav-item">
          <a href="people.html" class="nav-link"><span class="nav-number">02.</span><br>Our People</a>
        </li>
        <li class="nav-item">
          <a href="services.html" class="nav-link">
            <span class="nav-number">03.</span>
            <br>Services</a>
        </li>
        <li class="nav-item">
          <a href="careers.html" class="nav-link"><span class="nav-number">04.</span><br>Careers</a>
        </li>
        <li class="nav-item">
          <a href="contact.html" class="nav-link"><span class="nav-number">05.</span><br>Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- End of Navigation -->
</header>

CSS

 .brand-wrap {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 999;
    }

    #burger {
      float: right;
      margin: 0;
    }

    .trigger-wrapper {
      position: absolute;
      right: 5px;
    }

    .main-nav a {
      text-decoration: none;
    }

    .main-nav {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(35, 31, 32, 1);
    }

    .nav-container {
      margin-top: 80px;
    }

    .nav-link {
      color: #fff;
      font-size: 1.5em;
      font-weight: 800;
      padding: .25em 1em;
    }

    .nav-link:hover {
      color: #82bc00;
    }

    .nav-number {
      font-size: .5em;
      font-weight: 600;
    }

    .nav-trigger-line {
      height: 3px;
      width: 30px;
      background-color: #fff;
      margin: 6px auto;
    }

JS

// Menu click function
$('#burger').click(function() {
  $('#mainNav').toggle();
});

// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
  $(".nav-container .nav .nav-item").addClass("is-open");
} else {
  $(".nav-container .nav .nav-item").removeClass("is-open");
}

jsfiddle：https://jsfiddle.net/WeebleWobb/auszo29m/2/

Answer 1

您需要在事件处理程序中发送它:

// Menu click function
$('#burger').click(function() {
  $('#mainNav').toggle(function () {
    // Check if Nav is visible
    if ($('#mainNav').is(':visible')) {
      $(".nav-container .nav .nav-item").addClass("is-open");
    } else {
      $(".nav-container .nav .nav-item").removeClass("is-open");
    }
  });
});

你能做的最好的事情是，你应该像上面那样把它放在回调函数中。

.addClass 当#mainNav :visible

.addClass when #mainNav :visible

javascript

jquery

visible