汉堡菜单点击问题
所以我做了一个汉堡菜单，你可以在这里找到：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>
<a href="#" id="toggle" class="toggle">
<div id="icon" class="icon"></div>
</a>
</div>
</div> 只需向.icon类元素及其伪类添加pointer-events: none 。
.icon, .icon:before, .icon:after{
pointer-events: none;
}
工作小提琴
链接地址: http://www.djcxy.com/p/83453.html