Меню гамбургера Нажмите кнопку

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