function displayMenu(){
var parentElement = document.getElementById("menuItem1");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","display: block");
}
}
When the button is clicked, I want to show only the first ul item. Instead of using :hover in my webpage to display the ul's, I am trying to use javascript to show the menu onclick. While I am not an expert in JavaScript, I am beginning to understand it gradually. However, I am still struggling with this piece of code. I attempted to assign unique IDs to the main li's of the top ul like menuItem1 and menuItem2, which made it possible to show the ul's for only that specific li, achieving my desired outcome of not opening both.
The issue lies in displaying every under-menu as well, indicating that I might have overlooked instructing it to affect only the first ul, not each child. I comprehend the overall logic behind it, but I am unfamiliar with JavaScript commands such as first.child. Any suggestions on how to steer me in the right direction?
I grasp the concept of obtaining the element with ID in this function, and comprehending Tagname is straightforward. However, the rest remains unclear to me. Although I realize it iterates through the objects, I do not quite understand why or what it does with them.
So, is there a way to impact solely the first ul without influencing every sub-category?
While CSS and HTML are working smoothly, perhaps there is another approach to achieve this without altering the three main Li's to have unique IDs?
This is a glimpse of my menu structure:
<nav id="cssmenu">
<ul>
<li id="menuItem1"><a href="">menuItem1</a>
<ul>
<li><a href="">submenu1, no unique ID</a></li>
<li><a href="">submenu1, no unique ID</a></li>
</ul>
<li id="menuItem2"><a href="">menuItem2</a>
<ul>
<li><a href=''>submenu2, no uniwue ID</a></li>
<li><a href=''>submenu2, no unique ID</a>
* <ul>
<li><a href=''>submenu2-2nd column, no unique ID</li>
* </ul>
<li><a href=''>submenu2, no unique ID</a></li>
</ul>
</ul>
</nav>
I marked a * where my ul that should not be opened is located. Is there any solution to this problem without assigning unique IDs to each ul? I gave the top-li's individual IDs such as menuItem1, etc., and would prefer not adding more unique IDs to my menu since it is rather extensive across many pages.
Additionally, I prefer using JavaScript over jQuery as I have yet to grasp the utilization of jQuery.
EDIT: Added IDs to my li's where necessary. Would utilizing addEventListener make this task simpler? Though unfamiliar with it, could I set actions for the first click and then close the menu with the second click? Thank you in advance for your assistance!
RE-EDIT: The code provided worked correctly, just did not hide the ul's again.
function Meny(){
var parentElement = document.getElementById("cssmenu");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","background: red"); } }
However, tweaking it to display:none hides the entire thing, resulting in my menu disappearing, which is not ideal. Can someone explain how this works? I must have missed something crucial, considering my limited understanding of JavaScript.