Question

所以我做了一个汉堡包菜单，你可以在这里找到：http://codepen.io/ChucKN0risK/pen/Chtqp。我唯一的问题是，如果我点击我的div（3条黑条纹），菜单就不会打开。

我尝试了这个https://stackoverflow.com/a/1313404/3906770没有结果。我也试图为每个元素复制我的函数，但它也不起作用。

这是我的代码：

＆＃ 13;

＆＃13;

$(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');
    }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

非常欢迎您提供帮助：）

Answer 1

只需将pointer-events: none添加到.icon类元素及其伪类。

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

<强> Working Fiddle

汉堡菜单点击问题

1 个答案: