在 div 下拉菜单之外单击时隐藏，但未显示切换
Posted
技术标签:
【中文标题】在 div 下拉菜单之外单击时隐藏，但未显示切换【英文标题】：on click outside of a div dropdown menu is hiding but the toggle is not displaying 【发布时间】：2019-06-02 19:03:53 【问题描述】：我已经创建了响应式引导菜单并添加了 jquery 代码来隐藏下拉 div，如果我们在 div 外部单击（切换栏）。但是问题是，一旦我单击外部 div 以关闭切换栏，它就不会显示切换栏单击后关闭下拉菜单后仍然正确显示十字符号。
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" id="ChangeToggle" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#navbar-collapse-1">
<div id="navbar-hamburger">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div id="navbar-close" class="hidden">
<span class="glyphicon glyphicon-remove"></span>
</div>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
Jquery：
<script type="text/javascript">
$(function()
$('#ChangeToggle').click(function()
$('#navbar-hamburger').toggleClass('hidden');
$('#navbar-close').toggleClass('hidden');
);
);
</script>
<script>
$(document).on('click',function()
$('.collapse').collapse('hide');
$('#navbar-hamburger').toggleClass('show');
$('#navbar-close').toggleClass('hidden');
)
</script>
【问题讨论】：
请创建 sn-p 以重现问题 你的css在哪里？ 【参考方案1】：试试这个。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" id="ChangeToggle" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#navbar-collapse-1">
<div id="navbar-hamburger">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div id="navbar-close" class="hidden">
<span class="glyphicon glyphicon-remove"></span>
</div>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
</body>
</html>
<script type="text/javascript">
$(function()
$('#ChangeToggle').click(function()
$('#navbar-hamburger').toggleClass('hidden');
$('#navbar-close').toggleClass('hidden');
);
);
</script>
<script>
$(document).on("click", function(event)
var $trigger = $(".navbar");
if($trigger !== event.target && !$trigger.has(event.target).length)
$('.collapse').collapse('hide');
$('#navbar-close').addClass('hidden');
$('#navbar-hamburger').removeClass('hidden');
);
</script>
让我谈谈你的问题。实际上，您正在触发整个文档，包括导航栏。这就是为什么你的导航栏也切换类。尝试在导航栏外部单击时折叠导航栏并切换按钮（导航栏元素除外）
【讨论】：
【参考方案2】：单击汉堡按钮时，您会切换“隐藏”类。
$('#navbar-hamburger').toggleClass('hidden')
但是当您单击文档时，您会切换“显示”类
$('#navbar-hamburger').toggleClass('show')
这对我来说没有意义。每次我猜你都应该切换同一个类。
【讨论】：
以上是关于在 div 下拉菜单之外单击时隐藏，但未显示切换的主要内容，如果未能解决你的问题，请参考以下文章