Question

I’m sure that this has been covered, but there are so many jquery parent questions that sifting through them is a pretty daunting task.

I have a page with an unordered menu dropdown list like this:

  <ul class="topnav">
    <span><li><a href="firstitem.php">Contact</a>
        <ul class="subnav">
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="testlink.php">Test Link</a></li>
        </ul>
    </li></span>

    <span><li><a href="seconditem.php">Ministries</a>
      <ul class="subnav">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
      </ul>
    </li></span>
</ul>

Currently, my jquery references this as such:

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        $(this).parent().find("ul.subnav").slideDown('fast');
        $(this).parent().parent("span").hover(function() {
            //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $(this).parent().find("ul.subnav").slideUp('medium');
        });
    });
});

The drop down works, but I can’t find the span I am looking for so currently it never slides up. Any help would be appreciated. Thanks

Also, I’d like to do this without adding individual tag id’s. yes it would be easier, but I’m getting this code from someone else and I’d like to keep it similar.

Answer 1

There are a few issues here.

1. Don’t put an <li> in a <span>. It breaks html validation rules and can cause issues.

2. The reason slideup does not work is because it is in a new function, meaning the scope of this has changed.

Code

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        var $ul = $(this).parent().find("ul.subnav");
        $ul.slideDown('fast');
        $(this).parent().parent("span").hover(function() {
        //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $ul.slideUp('medium');
        });
    });
});

This should work better for you.