我在下面有这段代码，它执行以下操作： 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>
1 回答
万千封印
TA贡献1891条经验 获得超3个赞
您正在将该功能添加到标题和按钮 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>
添加回答
举报
0/150
提交
取消