CODEWITHSUNDEEP
javascripthtmlcssmenu
abuzer kadayıf
abuzer kadayıf

Reputation: 37

Expand/Collapse Menu not working at all

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>

Upvotes: 0

Views: 122

Answers (1)

Nelson Teixeira
Nelson Teixeira

Reputation: 6572

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>

Upvotes: 3

Related Questions