单击“外部区域”时关闭移动菜单
单击“外部区域”时关闭移动菜单
提问于 2018-02-15 01:13:38
如果我问了同样的问题，我很抱歉，但我已经尝试过任何解决办法，但我仍然没有任何东西给我。和标题一样，当我点击区域菜单的外部时，我想关闭移动菜单。这是我使用切换按钮时的jquery
$('.mobile-nav-toggler').click(function() {
$('.mobile-nav-overlay').fadeToggle(200)
$('.mobile-nav-toggler').toggleClass('active')
$('body').toggleClass('mobile-nav-opened')
});移动导航覆盖是层菜单。有人能帮我吗？谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 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()
});Stack Overflow用户
发布于 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();
});Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48803539
复制
相似问题
从文本文件中读取和写入字符串
从文本文件中读取和显示字符串
从文本文件中读取np数组
如何从文本文件中读取数组？
如何从文本文件中读取和添加数组中的数字
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
