BruceyBandit :
I have this code below which does the following: 1: User clicks button and it toggles on or off the drop down menu 2: User clicks anywhere that's within webslides element and it will close the menu if displayed
The problem is that webslides is underneath the button and I want the user to also click on the header to be able to not display the menu if displayed, but this doesn't work. Instead the button never displays the menu at all no matter how many times I try to click the button to open the menu,
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>rafaelcastrocouto :
You are adding the function to the header and to the button onclick so they both run "at the same time" since the button is a child of the header and the style don't change.
The relevant code with one possible solution to your issue:
var button = document.getElementsByClassName('dropbtn')[0];
...
header.onclick = function(event) {
if (event.target !== button)
menu.style.display = "none";
}
Test it out:
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>Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=302105&siteId=1