Question

This may seem like a simple and straightforward question and it probably has a straightforward answer. I have two drop down boxes in my toolbar, one that drops on hover and the other on click and the other on hover.

I can’t for the life of me figure out how to make them run independently. I am very new to jquery and have scoured the internet before coming here.

Fiddle without css but still does same thing.

http://jsfiddle.net/GQtuH/

Here is the jquery

$(document).ready(function () { 

$('#discoverDrop').hover(
    function () {
        //show its submenu
        $('ul, this').slideDown(500);

    }, 
    function () {
        //hide its submenu
        $('ul, thid').slideUp(500);         

});



$('#profile').toggle(function(){
        $('ul, this').slideDown(500);
    }, function(){
        $('ul, this').slideUp(500);
    });


});

And the neccesary markup

<span id="discoverDrop">
       <span id="drop"><m2>Discover</m2>
        <ul>
         <li><m2><a href="../artists"><m2>Artists</m2></a></li></m2>
         <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
         <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
         <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
       </span>
      </span>

      <span id="profile">
        <span id="profileDrop">
          <ul>
           <li><m2><a href="../phpscripts/logout.php"><m2>Logout</m2></a></li></m2>
           <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
           <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
           <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
        </span>
      </span>

Answer 1

$(arg1, arg2) arg1 is usually a string containing selectors we need to get selected. arg2 is a jQuery Object inside which we should check for it.

Doing $('ul, this') will pass a single argument 'ul, this' and jQuery will search for elements with tagname 'ul' and 'this' throughout the document.

Doing $('ul', this) looks like what you want.

$(document).ready(function () {
    $('#discoverDrop').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(500);

        },
        function () {
            //hide its submenu
            $('ul', this).slideUp(500);         

    });
    $('#profile').toggle(function(){
            $('ul', this).slideDown(500);
        }, function(){
            $('ul', this).slideUp(500);
        });

});

---

<span id="discoverDrop">
   <span id="drop"><m2>Discover</m2>
        <ul>
         <li><m2><a href="../artists"><m2>Artists</m2></a></li></m2>
         <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
         <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
         <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
   </span>
</span>

<span id="profile">
    Click Me to Toggle
    <span id="profileDrop">
        <ul>
           <li><m2><a href="../phpscripts/logout.php"><m2>Logout</m2></a></li></m2>
           <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
           <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
           <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
    </span>
</span>

Fiddle: http://jsfiddle.net/GQtuH/3/

UPDATE

If you are using float right for profile in the layout, its always recommended to put the right floated element first in the HTML. like :

<span id="profile">
...
</span>
<span id="discoverDrop">
...
</span>