Sub menu hide/show does not workout when click on the parent div-CodePudding

I have this vertical menu:

<li  id="verticalMenu"><a  >Menu item</a>
    <ul style="display:none" >
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li>

And as you can see I have set the display:none for the class submenus and then within this Javascript code I tried to show the sub menu items, when user click on the menu item:

$(document).on('click','#verticalMenu',function(){
    let sbm = document.querySelector(".submenus");
    sbm.style.display = "block";
});

But now this thing does not work out and not shows the sub menu items.

However, I have made sure that the onlick event runs successfully.

I also tried showing the sub menu items like this:

sbm.toggle();

But it says: toggle is not a function

So what's going wrong here? How can I properly hide/show this .submneus class when clicking on the link with id of verticalMenu?

CodePudding user response：

function Change(){
    let sbm = document.querySelector(".submenus");
     if (sbm.style.display !== "none") {  
                sbm.style.display = "none";  
            }  
            else {  
                sbm.style.display = "block";  
            }  
};

HTML:

<li  id="verticalMenu" onClick = Change()><a  >Menu item</a>
    <ul style="display:none" >
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li>

Here Try This Its Working

CodePudding user response：

You are not removing the display block, therefore it will always be shown as soon as you clicked it once. You have to change the display to none again after your first click.

$(document).on('click','#verticalMenu',function(){
    let sbm = document.querySelector(".submenus");

    console.log(sbm.style.display)

    if(sbm.style.display == "block") {
       sbm.style.display = "none";
    } else {
       sbm.style.display = "block";
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li  id="verticalMenu"><a  >Menu item</a>
    <ul style="display:none" >
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li>

A more elegant solution is the correct implementation of the toggle function from jquery. I have also styled the cursor for your menu element so there is a visible response when the cursor is on it.

$(document).on('click','#verticalMenu',function(){
    $(".submenus").toggle("100"); //remove the 100ms if you don't want an animation. 
});

.vertical_menu_group_item {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li  id="verticalMenu"><a  >Menu item</a>
    <ul style="display:none" >
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li>

See https://api.jquery.com/toggle/ for more infos.