Expand/Collapse Menu not working at all
Question
I am trying to cretae an expand/collapse menu using javascript. The structure something like this.
.menu
.subItem
.subItem
this a part of css
ul.menu {
display: none
}
but menu items not expandind from the collapse
this the js file
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle() {
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById(thisMenuName).style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
when I open up chrome developer tools I have realize that Its been pointed out this line once click the menu
var thisMenu = document.getElementById(thisMenuName).style;
What am doing wrong again again again
@Edit:I forgot to add html file
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
a
</head>
<body>
<div>
<a href="" class="menuLink">trajedi</a>
<ul class="menu" id="menu1">
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
</ul>
</div>
1 answers
solution1
3 ACCPTED 2018-08-23 14:50:12
I don't know what you tried to do with the substring part in togle function. That's the only problem with your code. Change the line:
var thisMenu = document.getElementById(thisMenuName).style;
to
var thisMenu = document.getElementById('menu1').style;
and it will work. Take a look:
window.onload = initAll; function initAll() { var allLink = document.getElementsByTagName("a"); for (var i = 0; i < allLink.length; i++) { if (allLink[i].className.indexOf("menuLink") > -1) { allLink[i].onclick = togle; } } } function togle(e) { // can't understand the use of the 3 lines below: var startMenu = this.href.lastIndexOf("/") + 1; var stopMenu = this.href.lastIndexOf("."); var thisMenuName = this.href.substring(startMenu, stopMenu); var thisMenu = document.getElementById('menu1').style; if (thisMenu.display == "block") { thisMenu.display = "none"; } else { thisMenu.display = "block"; } return false; }
ul.menu { display: none }
<div> <a href="" class="menuLink">trajedi</a> <ul class="menu" id="menu1"> <li><a href="">deneme</a></li> <li><a href="">deneme</a></li> </ul> </div>
a much simpler and modern version of your code would be:
function initAll() { Array.from(document.getElementsByTagName("a")) .filter((link)=>link.className.indexOf("menuLink") > -1) .forEach((link)=>link.onclick = ()=>{ var thisMenu = document.getElementById('menu1').style; thisMenu.display = (thisMenu.display == "block") ? 'none' : 'block'; return false; }); } window.onload = initAll;
ul.menu { display: none }
<div> <a href="" class="menuLink">trajedi</a> <ul class="menu" id="menu1"> <li><a href="">deneme</a></li> <li><a href="">deneme</a></li> </ul> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.