如果用户单击屏幕上的任意位置如何关闭菜单？
我有下面的代码，它执行以下操作： 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>
慕无忌16237181回答
-
森栏
您将该函数添加到标题和按钮 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>
随时随地看视频慕课网APP
相关分类
Html5