CODEWITHSUNDEEP
javascript
sai
sai

Reputation: 11

Toggle using pure JavaScript

<script>
function toggleMenu() {
    var thisMenu = document.getElementById(id).getElementsByTagName('ul')[0];
    if( thisMenu.style.display == 'block' ) {
        thisMenu.style.display = 'none';
    } else { 
        thisMenu.style.display = 'block';
    }
    return thisMenu;
}

<li class="NavLinks test2" id="menuItem">
    <a onclick="toggleMenu('menuItem');">Tutorial</a>
    <ul>
        <li><a href="http://www.google.com">google</a></li>     
        <li><a href="http://www.yahoo.com">yahoo</a></li>
    </ul>
</li>

</script>

**description********

onClick on Tutorial hide's the submenu items but if I click on Tutorial and hover over submenu items and hovers out the item list item are not hiding. Please let me know if my code needs to modify.

Upvotes: 0

Views: 2304

Answers (2)

Alex Sexton
Alex Sexton

Reputation: 10451

Currently, your toggleMenu function does not take any arguments. Also your html is inside of your script tag

<script>
function toggleMenu( id ){
  var thisMenu = document.getElementById(id).getElementsByTagName('ul')[0];
  if( thisMenu.style.display == 'block' ) {
    thisMenu.style.display = 'none';
  }
  else {
    thisMenu.style.display = 'block';
  }
  return thisMenu ;
}
</script>
<li class="NavLinks test2" id="menuIteam">
<a onclick="toggleMenu('menuIteam');">Tutorial</a>
<ul>
<li><a href="http://www.google.com">google</a></li>     
<li><a href="http://www.yahoo.com">yahoo</a></li>
</ul>
</li>

Upvotes: 0

Nadh
Nadh

Reputation: 7253

You haven't defined the id argument.

Change

function toggleMenu(){

to

function toggleMenu(id){

Upvotes: 1

Related Questions