Ich bin neu in JavaScript. Ich habe ein Drowdown-Menü erstellt. Immer wenn ich klicke, öffnet sich das Dropdown-Menü und wenn ich erneut klicke, wird es ausgeblendet. Ich möchte JavaScript-Code, dass, wenn ich auf den Menüpunkt aus dem Dropdown-Menü klicken sollte es verstecken.Versteckt Dropdown-Box nach dem Klicken auf Menüelement in der Dropdown-Box
Code:
/* ----- JavaScript ----- */
var menuButton = document.getElementById("menu-btn");
var dropBox = document.getElementById('drop-box');
var menuItem = document.getElementsByClassName('sub-menu-item');
dropBox.style.display = 'none';
menuButton.onclick = function() {
if (dropBox.style.display == 'none') {
dropBox.style.display = 'block';
} else {
dropBox.style.display = 'none';
}
};
/* ----- CSS ----- */
#menu-btn {
margin: 20px auto;
width: 200px;
height: 50px;
background-color: green;
text-align: center;
padding-top: 30px;
cursor: pointer;
}
#drop-box {
width: 191px;
position: absolute;
left: 697px;
top: 100px;
margin: 0;
padding: 0;
}
#drop-box li {
list-style: none;
}
.linkBtn {
width: 100%;
background-color: orange;
display: block;
margin: 3px;
padding: 5px;
color: black;
text-align: center;
}
.linkBtn:hover {
background-color: green;
}
<!----- HTML ----->
<div id="menu-btn" onClick="function();">
click to open
</div>
<ul id="drop-box">
<li class="sub-menu-item"><a href="#" class="linkBtn">item 01</a></li>
<li class="sub-menu-item"><a href="#" class="linkBtn">item 02</a></li>
<li class="sub-menu-item"><a href="#" class="linkBtn">item 03</a></li>
<li class="sub-menu-item"><a href="#" class="linkBtn">item 04</a></li>
<li class="sub-menu-item"><a href="#" class="linkBtn">item 05</a></li>
</ul>
Meine Frage ist, wann immer, welchen Code kann ich in Javascript geben, die das Dropdown-Menü nach dem Klick auf den Menüpunkt verbergen können?