My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click on one of the items within the list.
This is my HTML structure:
<ul class="dropdown">
<li><a id="drivers" onclick="dropdown(this); return false;" class="dir">Download Drivers</a>
<ul id="driversmenu" class="sub">
<li><a>Download Drivers</a></li>
<li><a>Driver Widget</a></li>
<li><a>NVIDIA Software</a></li>
</ul>
</li>
</ul>
Here's the Javascript code snippet:
function dropdown(obj)
{
alert("klik");
var elements = document.getElementsByClassName("sub");
var ids = '';
for (var i = 0; i < elements.length; i++)
{
document.getElementById(elements[i].id).style.display = 'none';
}
if (document.getElementById(obj.id + 'menu').style.display == 'block')
{
alert("al open");
document.getElementById(obj.id + 'menu').style.display = 'hidden';
}
else if (document.getElementById(obj.id + 'menu').style.display = 'hidden')
{
alert("niet open");
document.getElementById(obj.id + 'menu').style.display = 'block';
}
return false;
};
The CSS styles are included below, although their relevance is uncertain:
ul.dropdown { list-style-type: none; width: 300px;float: left; height: 0px; margin-top: 0px; padding-left: 0px; }
ul.dropdown a { display: block; color: white; text-decoration: none; list-style-type: none; }
ul.dropdown li { float: left; padding: 0 0px; border: 1px dotted #d0d0d0; list-style-type: none;}
ul.dropdown li ul { display: none; position: absolute; z-index: 99; }
ul.dropdown li ul li { clear: both; margin-left: 0px; padding-left: 0px; border: 0; min-width: 150px; }
ul.dropdown li ul li:hover { background-color: #d1d1d1; }
ul.dropdown li ul li:hover a { color: red; }
I'm encountering an issue where the condition never triggers this part of the code:
if (document.getElementById(obj.id + 'menu').style.display == 'block')
{
alert("al open");
document.getElementById(obj.id + 'menu').style.display = 'hidden';
}
If anyone can provide insights into what might be going wrong, I would greatly appreciate it. Thank you in advance.