Jquery. Why this doesn't work?

Question

This is html code:

                   <a class="cat" href="#">category</a>
                 <span class="kiti" style="position:absolute; padding:5px; margin-left:-18px; display:none; background-color:#000">
                    <a href="#">sub1</a>
                    <br /><a href="#">sub2</a>
                    </span>

And functions.js

$(document).ready(function() {      
  $(".cat").hover(function() {
    $(this).next().slideDown(300);  
  });
  $(".cat").mouseout(function() {
    $('.kiti').slideUp(300);
  });
});

How to make, that it would allow to press sub1 and sub2, because when I try it, sub-category hides. Thank you.

Answer 1

You're not applying hover correctly. It takes two functions as arguments (mouseover and mouseout). Try:

$(document).ready(function() {
    $(".cat").hover(function() { 
        $(this).next().slideDown(300); 
    }, function() { 
        $('.kiti').slideUp(300);     
    });
});

or the plain mouseover/mouseout equivalent:

$(document).ready(function() {
    $(".cat").mouseover(function() { 
        $(this).next().slideDown(300); 
    }).mouseout(function() { 
        $('.kiti').slideUp(300);
    });
});

Answer 2

Try:

$(document).ready(function() {      
  $(".cat").hover(function() {
    $(this).next().stop().slideDown(300);
  }, function() {
    $(this).next().stop().slideUp(300);
  });
});

hover() takes two callbacks: the first is for when the mouse is over the element(s). The second is for when the mouse leaves.

Note that you also had some missing semi-colons and other syntactic problems.

Also, it's advisable to stop() animations in this kind of situation otherwise with quickly firing events you may not get the desired result.

Lastly, I'm not entirely convinced slideUp and slideDown will behave as desired with inline elements (being that <span> as opposed to block-level elements). Come to think of it, that's probably the root cause of your problems. From slideUp():

Hide all matched elements by adjusting their height and firing an optional callback after completion.

Inline elements don't respond to height adjustments. So you should use a <div> or make that particular <span> display: block.