Hamburger Menu Click Issue

So I made a hamburger menu which you can find here : http://codepen.io/ChucKN0risK/pen/Chtqp. The only issue I have is that if I click on my div (3 black stripes) the menu won't open itself.

I tried this https://stackoverflow.com/a/1313404/3906770 with no results. I also tried to duplicate my function for each elements however it doesn't work either.

Here is my code :

$(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>	
        <a href="#" id="toggle" class="toggle">
             <div id="icon" class="icon"></div>
        </a> 
    </div>
</div>

---

Just add pointer-events: none to .icon class element and its pseudo classes.

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

Working Fiddle

链接地址: http://www.djcxy.com/p/83454.html

上一篇: 使用CoffeeScript为多个jQuery对象设置相同的点击

下一篇: 汉堡菜单点击问题