我下面有这段代码，它执行以下操作: 1:用户单击按钮并打开或关闭下拉菜单 2:用户单击 webslides 元素内的任何位置，如果显示，它将关闭菜单
问题是网页幻灯片位于按钮下方，我希望用户也单击标题以便在显示菜单时能够不显示菜单，但这不起作用。相反，无论我尝试单击按钮打开菜单多少次，该按钮都不会显示菜单，
var menu = document.getElementsByClassName("dropdown-content")[0];
var header = document.getElementById('header');
var webslidesBody = document.getElementById('webslides');
function lessonSelectionFunction() {
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
webslidesBody.onclick = function() {
menu.style.display = "none";
}
header.onclick = function() {
menu.style.display = "none";
}<html>
<head>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet" />
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css" />
<!-- CSS Webslides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<header id="header">
<nav role="navigation" class="nav">
<div class="dropdown">
<button class="dropbtn" style="text-transform: none;" onclick="lessonSelectionFunction()">Lesson Selection</button>
<div class="dropdown-content" style="display:none;">
<a href="#slide=1">Introduction</a>
<a href="#slide=4">Lesson 1: Methodologies and Development Lifecycle</a>
<a href="#slide=18">Lesson 2: IT Support</a>
<a href="#slide=29">Lesson 3: Testing Foundations</a>
<a href="#slide=42">Lesson 4: Manual Testing Activities</a>
<a href="#slide=52">Lesson 5: Intro Into Automation</a>
</div>
</div>
</nav>
<a id="logout" href="logout.php">Logout</a>
</header>
<article id="webslides">
<!-- First slide -->
<section class="slideInRight" id="slide=1">
// REST OF HTML CONTENT ............
</section>
</article>
</body>
</html>最佳答案
您正在将函数添加到标题和按钮 onclick 中，以便它们“同时”运行，因为按钮是标题的子项并且样式不会更改。
相关代码以及您的问题的一种可能解决方案:
var button = document.getElementsByClassName('dropbtn')[0];
...
header.onclick = function(event) {
if (event.target !== button)
menu.style.display = "none";
}
测试一下:
var menu = document.getElementsByClassName("dropdown-content")[0];
var header = document.getElementById('header');
var webslidesBody = document.getElementById('webslides');
var button = document.getElementsByClassName('dropbtn')[0];
function lessonSelectionFunction() {
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
webslidesBody.onclick = function() {
menu.style.display = "none";
}
header.onclick = function(event) {
if (event.target !== button)
menu.style.display = "none";
}<header id="header">
<nav role="navigation" class="nav">
<div class="dropdown">
<button class="dropbtn" style="text-transform: none;" onclick="lessonSelectionFunction()">Lesson Selection</button>
<div class="dropdown-content" style="display:none;">
<a href="#slide=1">Introduction</a>
<a href="#slide=4">Lesson 1: Methodologies and Development Lifecycle</a>
<a href="#slide=18">Lesson 2: IT Support</a>
<a href="#slide=29">Lesson 3: Testing Foundations</a>
<a href="#slide=42">Lesson 4: Manual Testing Activities</a>
<a href="#slide=52">Lesson 5: Intro Into Automation</a>
</div>
</div>
</nav>
<a id="logout" href="logout.php">Logout</a>
</header>
<article id="webslides">
<!-- First slide -->
<section class="slideInRight" id="slide=1">
// REST OF HTML CONTENT ............
</section>
</article>关于javascript - 如果用户单击屏幕上的任意位置如何关闭菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60730154/