我有一个移动幻灯片菜单。我希望用户单击正文以向后滑动移动菜单。我也只希望菜单按钮在滑动打开时固定位置。
我从这个代码笔中使用了以下代码：https://codepen.io/ellissei/pen/VvgYjB
我稍微改变了它，但要设置菜单按钮的样式。
<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");
})
});
这将针对身体，但不包括酒吧和汉堡包... 此外，代码笔代码缺少标签，添加它们以对其进行测试。
您的问题是汉堡包在体内，并且在那里删除点击打开的类。
编辑：
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("article").click(function()
{
$(".navigation").removeClass("open");
})
});