我在下面有这段代码，它执行以下操作： 1：用户单击按钮，它打开或关闭下拉菜单 2：用户单击 webslides 元素内的任何位置，如果显示它将关闭菜单
问题是 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>
</section>
</article>
</body>
</html>
万千封印
相关分类