Home/ Questions/Q 6179901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:45:04+00:00

I’m fairly new to jquery and so far i have got my code to

  • 0

I’m fairly new to jquery and so far i have got my code to toggle and slide a html menu. heres my code

<script type="text/javascript">
$(document).ready(function () {
    $('li').each(function(){
$('li.menuheader').hover(function(){
    $('ul.submenu').slideToggle('slow', function(){})
});
}); 

});
</script>
</head>
<body>
<div id="navbar">
  <ul>


    <li class="menuheader">test1
      <ul class="submenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>


    <li class="menuheader">test2
      <ul class="submenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>


    <li class="menuheader">test3
      <ul class="submenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>


  </ul>
</div>

</body>
</html>

my jquery dropdowns every menu everytime the mouse hovers over a menuheader. I need to seperate these out without using div id’s and making seperate jquery functions. Can anyone help me with how to do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe this is what you are looking for (n need to use slideToggle i think):

    $('ul.submenu').hide();
$('li').each(function() {
    $('li.menuheader').hover(function() {
        $(this).find('ul.submenu').show('slow')
    }, function() {
        $(this).find('ul.submenu').hide('slow')
    });
});

    fiddle here: http://jsfiddle.net/DRjPF/

    • 0