如果我问了同样的问题,我很抱歉,但我已经尝试过任何解决办法,但我仍然没有任何东西给我。和标题一样,当我点击区域菜单的外部时,我想关闭移动菜单。这是我使用切换按钮时的jquery
$('.mobile-nav-toggler').click(function() {
$('.mobile-nav-overlay').fadeToggle(200)
$('.mobile-nav-toggler').toggleClass('active')
$('body').toggleClass('mobile-nav-opened')
});
移动导航覆盖是层菜单。有人能帮我吗?谢谢
发布于 2018-02-15 01:33:02
之后,移动菜单将被点击,它将打开,在这个菜单下添加100%的宽度和高度和不透明度将是你所需要的。在此之后,添加另一个脚本,它将显示:单击..div it时关闭菜单
$('.new-div-under-menu').click(function() {
$('.menu').hide() // or removeClass, or toggle or something
$('.new-div-under-menu').hide()
});
发布于 2018-02-15 01:56:25
像这样简单的东西应该会起作用:基本上,在页面上的任何点击(html单击)上,它都会检查主体是否有类“移动导航打开”(只有在打开菜单时才存在),所以如果是这样的话,您可以将菜单隐藏在这里。
只要您单击nav容器(我的示例中的“.”),此事件就不会发生。
$('html').click(function() {
if ($('body').hasClass('mobile-nav-opened')){
// Hide your menu here
}
});
// replace mobile-nav with your entire nav container
$('.mobile-nav').click(function(e){
e.stopPropagation();
});
发布于 2018-02-15 02:45:33
我们可以使用以下代码来完成这个任务:
Note:带有红色背景的“mobile”文本显示移动菜单是“Off”;“绿色背景”显示的是“On”。
在本例中,return false
在toggler方法> mobileMenuToggle
中非常重要。
$(function() {
mobileMenuToggle();
closeMobileMenu();
});
function mobileMenuToggle() {
$('.mobile-nav-toggler').click(function() {
$(this).toggleClass('active');
$('body').toggleClass('mobile-nav-opened');
return false;
});
}
function closeMobileMenu() {
$('html').click(function() {
$('.mobile-nav-toggler').removeClass('active');
$('body').removeClass('mobile-nav-opened');
});
}
.mobile-nav-toggler {
cursor: pointer;
background: red;
color: white;
padding: 20px 30px;
display: inline-block;
}
.mobile-nav-toggler.active {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-nav-toggler">
Mobile Nav Toggle
</div>
https://stackoverflow.com/questions/48803539
复制相似问题