햄버거 메뉴 클릭 이슈

Question

그래서 나는 여기에서 찾을 수있는 햄버거 메뉴를 만들었습니다 : http://codepen.io/ChucKN0risK/pen/Chtqp. 유일한 문제는 내 div (3 개의 검은 줄무늬)를 클릭하면 메뉴가 열리지 않는다는 것입니다.

나는이 시도했다 https://stackoverflow.com/a/1313404/3906770 결과가 없습니다. 또한 각 요소에 대해 내 함수를 복제하려고했지만 작동하지 않습니다.

$(function() { 
 
    $('#toggle').click(function() { 
 
     $('#icon').toggleClass('menu-active'); 
 
     // Calling a function in case you want to expand upon this. 
 
     toggleNav(); 
 
    }); 
 
}); 
 

 
function toggleNav() { 
 
    if ($('#site_wrapper').hasClass('show-menu')) { 
 
     // Do things on Nav Close 
 
     $('#site_wrapper').removeClass('show-menu'); 
 
    } else { 
 
     // Do things on Nav Open 
 
     $('#site_wrapper').addClass('show-menu'); 
 
    } 
 
} 
 

 
//Click outside menu to hide it 
 
$(document).on('click', function (e) { 
 
    var $this = $(e.target); 
 
    if ($this.closest('#aside_menu').length == 0 && $this[0].id != "toggle") { 
 
     $('#site_wrapper').removeClass('show-menu'); 
 
     $('#icon').removeClass('menu-active'); 
 
    } 
 
});

.toggle { 
 
    width: 70px; 
 
    height: 70px; 
 
    display: block; 
 
    background-color: #CACACA; 
 
    position: relative; 
 
} 
 
.icon { 
 
    width: 24px; 
 
    height: 4px; 
 
    background-color: #000; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    transition: all .4s ease; 
 
} 
 
.icon:before, .icon:after { 
 
    width: 100%; 
 
    height: 4px; 
 
    display: block; 
 
    content:' '; 
 
    background-color: #000; 
 
    position: absolute; 
 
    transition: all .4s ease; 
 
} 
 
.icon:before { 
 
    top: -8px; 
 
} 
 
.icon:after { 
 
    top: 8px; 
 
} 
 
.menu-active { 
 
    background: none; 
 
} 
 
.menu-active:before { 
 
    top: 0; 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 
.menu-active:after { 
 
    top: 0; 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 
#site_wrapper { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: royalblue; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 500px; 
 
    position: relative; 
 
    background-color: tomato; 
 
    /* Pour forcer l'accélération GPU on utilise transform3d */ 
 
    -webkit-transform: translate3d(0); 
 
    transform: translate3d(0); 
 
    -webkit-transition: .3s ease all; 
 
    transition: .3s ease all; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.show-menu #container { 
 
    -webkit-transform: translate3d(300px, 0, 0); 
 
    transform: translate3d(300px, 0, 0); 
 
} 
 
#aside_menu { 
 
    width: 300px; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -300px; 
 
    background: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="site_wrapper" class="site_wrapper"> 
 
    <div id="container" class="container"> 
 
     <div id="aside_menu" class="aside_menu"></div> \t 
 
     <a href="#" id="toggle" class="toggle"> 
 
      <div id="icon" class="icon"></div> 
 
     </a> 
 
    </div> 
 
</div>

당신의 도움을 환영합니다 :)

이

Answer 1

그냥 pointer-events: none 클래스 요소 .icon에 그 의사 클래스를 추가 이상입니다 :

여기 내 코드입니다.

.icon, .icon:before, .icon:after{ 
    pointer-events: none; 
} 

Working Fiddle

의미가 있습니다