我有一个移动滑动菜单。我想让用户点击主体就可以滑回移动菜单。我也只想让菜单按钮在滑动打开时位置固定。
我从这个codepen中使用了以下代码。https:/codepen.ioellisseipenVvgYjB
我把它改了一下，但要把菜单按钮的样式和。
<script>
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$(document).('body', 'click', function(event) {
$('.open').removeClass('open');
})
});
</script>
<html>
<nav class="navigation">
<div class="hamburger ">
<span class="bars"></span>
</div>
<div class="menu-mobile" style="background-image:url(<?php echo get_template_directory_uri(); ?>/img/ecw-bg-graphic-menu%402x-100.jpg);" >
<?php get_search_form(); ?>
<ul class="menu-mobile-hoofdmenu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu clearfix' ) ); ?>
</ul>
<hr>
<ul class="menu-mobile-topmenu">
<?php wp_nav_menu( array( 'theme_location' => 'menu-top-header' ) ); ?>
</ul>
</div>
</nav>
</html>
</pre>
CSS
<pre>
.navigation {
display:none;
}
.hamburger {
position: fixed;
top: 20px;
right: 30px;
cursor: pointer;
z-index: 1000;
background:white;
height: 30px;
border-radius: 30px;
}
.hamburger span {
vertical-align: middle;
transform: scale(0.5);
margin-top: 13px;
}
.hamburger .bars {
display: block;
position: relative;
width: 30px;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hamburger .bars:before, .hamburger .bars:after {
position: absolute;
content: " ";
width: 100%;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
border-radius: 10px;
}
.hamburger .bars:before {
top: 10px;
}
.hamburger .bars:after {
bottom: 10px;
}
.open .hamburger .bars {
background-color: transparent;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.open .hamburger .bars::before {
top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #DA4E29;
}
.open .hamburger .bars::after {
bottom: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #DA4E29;
}
.menu-mobile {
width: 70%;
height: 100%;
padding: 75px 0px 0 0;
background-position: center;
background-size: cover;
position: fixed;
right: -100%;
top: 0;
opacity: 0;
z-index: 999;
margin-top: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile a {
color: white;
}
.menu-mobile a:hover {
color: white;
}
.open .menu-mobile {
right: 0;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile:hover {
overflow-y: auto;
}
ul.menu-mobile-hoofdmenu, ul.menu-mobile-topmenu {
padding-left: 0%;
}
</pre>
我不能复制你的代码片段，但作为代码笔的代码去。
替换jQuery代码。
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("body").click(function(e)
{
if ($(e.target).hasClass('bars', "hamburger")) {
return false;
}
$(".navigation").removeClass("open");
})
});
这样就会以主体为目标，但不包括栏杆和汉堡包......另外，代码笔的代码缺少标签，添加它们来测试。
你的问题是，汉堡包在body里面，而且那里是为了移除点击时打开的类。
EDIT.你的问题是，汉堡包在body里面，有为删除类在点击时打开。
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("article").click(function()
{
$(".navigation").removeClass("open");
})
});