如何解决如何通过在菜单外部单击来关闭移动菜单
我的网站基于WP主题,网站上的主菜单是汉堡包菜单。 菜单的宽度约为屏幕宽度的1/4(在台式机上)
我想在屏幕提醒3/4中的任意位置单击,此单击应折叠菜单。当前仅在我选择“ X”按钮时关闭。
在此处查看网站: https://joos.app/
下面是相关的JS代码来实现这一目标。我可以根据您的建议在此代码中添加/修改哪些内容以实现它
/* Navigation Events */
jQuery('.nav-butter.hidden_menu,.nav-butter.visible_menu').on('click',function () {
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active').parents('.site-header').find('.navigation').removeClass('active');
} else {
jQuery(this).addClass('active').parents('.site-header').find('.navigation').addClass('active');
}
});
jQuery('.nav-butter.side_menu').on('click',function () {
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery('.site-header-side-nav').removeClass('active');
} else {
jQuery(this).addClass('active');
jQuery('.site-header-side-nav').addClass('active');
}
});
jQuery('[href="#"]').on('click',function(e) {
e.preventDefault();
});
jQuery('.side-navigation a').on('click',function (e) {
var $el = jQuery(this),$parent = $el.parent();
if ($parent.hasClass('menu-item-has-children') && !$parent.hasClass('active')) {
e.preventDefault();
$parent.addClass('hide active').siblings().addClass('hide');
$el.parents('.sub-menu').addClass('opened');
}
});
jQuery('.side-navigation .sub-menu > .back').on('click',function () {
var $el = jQuery(this);
$el.parent().parent().removeClass('hide active').siblings().removeClass('hide');
$el.parent().parent().removeClass('opened').parent().removeClass('opened');
});
jQuery('.side-navigation').find('.sub-menu').prepend('<li class="back free-basic-ui-elements-left-arrow"></li>');
预先感谢,请忽略其余的小错误,网站仍在构建过程中。
解决方法
您可以在菜单后面添加一个透明层,上面带有一个事件。因此,当用户单击该透明层时,菜单将关闭。
小例子:
$(document).ready(function() {
$("#menu-opener").click(function() {
$(".menu-container").toggle();
})
$("#menu-layer").click(function() {
$(".menu-container").toggle();
})
});
body,html {
height: 100%;
width: 100%;
padding: 0px;
}
.menu-container {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
}
#menu-layer {
z-index:1;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-color: transparent;
}
.menu {
position: absolute;
z-index: 2;
right: 0px;
top: 0px;
bottom: 0px;
width: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-opener">Open menu</button>
<div class="menu-container" style="display:none">
<div id="menu-layer">
</div>
<div class="menu">
Here is the menu
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。