햄버거와 사이드 바 영향 충돌

Question

나는 일하고 싶지 않은이 한 조각의 코드에 무수한 것들을 시도했습니다. 내 프로젝트에서 다음 CSS 및 JavaScript 라이브러리를 결합합니다.

Materialize; 정상화; 아이콘; 구성 요소; 햄버거 CSS; Modernizr (관례); jQuery; Classie.js; sidebarEffects.js; 및 SweetAlert. 여기

내가 문제로 실행하고 내 코드입니다 :

<div class="sideMenu"> 
    <button class="hamburger hamburger--collapse" type="button" onclick="this.toggleClass('is-active);"></button> 
    <div id="st-trigger-effects"> 
     <button data-effect="st-effect-11" class="hamburger"> 
      <span class="hamburger-box"> 
       <span class="hamburger-inner"></span> 
      </span> 
     </button> 
    </div> 
</div> 

문제는 버튼 (햄버거 아이콘)을 클릭 할 때마다 아이콘이로 전환하지 않지만, 메뉴, 나타난다이다 적절한 "is-active"아이콘 및/또는 클래스! 필자는 실제로 그것을 테스트했으며 "is-active"클래스를 사용하더라도 아이콘이 변경되지 않습니다. 사전에 너무 많은

div.sideMenu { 
    margin-top: 5%; 
    width: 15%; 
    height: 10%; 
    position: fixed; 
    margin-left: 5%; 
} 

도와주세요, 감사 :

활성 상태 인 "sideMenu"클래스,이은에 CSS 코드입니다!

Answer 1

당신이 가지고있는가는 다음

<button class="hamburger hamburger--collapse" type="button" onclick="this.toggleClass('is-active);"></button> 
<div id="st-trigger-effects"> 
    <button data-effect="st-effect-11" class="hamburger"> 
     <span class="hamburger-box"> 
      <span class="hamburger-inner"></span> 
     </span> 
    </button> 
</div> 

어느해야한다 : 당신이 밖으로 클릭하면

<div id="st-trigger-effects"> 
    <button data-effect="st-effect-11" class="hamburger hamburger--collapse" type="button"> 
     <span class="hamburger-box"> 
      <span class="hamburger-inner"></span> 
     </span> 
    </button> 
</div> 

이 올바르게 그러나입니다 활성 상태로 변환 할 수있는 햄버거를 얻을 것이다 애니메이션 상태이면 햄버거를 재설정하지 않습니다 (햄버거가 아닌 아무 곳이나 클릭하여 애니메이션이 아닌 상태로 복원하기 때문에). 해당 이벤트를보고 해당 애니메이션 상태에서 콘텐츠를 복원하는 콜백 함수를 결정하고 is-active 클래스를 제거하여 햄버거 아이콘을 재설정해야합니다.