.adClass #mainNav : visible

Question

희망 : 메뉴 버튼을 클릭하고 내비게이션 (#mainNav)을 삽입하면 표시되는지 확인합니다. 그렇다면 .addClass .is-open .nav-item. 탐색 (#mainNav)이 닫히면 .removeClass .is-open .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"); 
    } 
    }); 
}); 

가장 좋은 것은, 당신은 위와 같이 콜백 함수 내부에 넣어해야합니다.