.addClass when #mainNav：visible

Question

所需： 当单击菜单按钮并导航（#mainNav）滑入时，检查以查看是否可见。如果是这样，.addClass .is打开.nav-item。当导航（#mainNav）关闭时，.removeClass .is-从.nav-item打开。

问题： 当导航可见时（幻灯片），不会将类添加到.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"); 
    } 
    }); 
}); 

你能做的最好的事情是，你应该把它的回调函数内像上面。