我有下面的代码，它执行以下操作： 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>
1 回答
森栏
TA贡献1810条经验 获得超5个赞
您将该函数添加到标题和按钮 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>
- 1 回答
- 0 关注
- 82 浏览
添加回答
举报
0/150
提交
取消