jQuery gets bugged on hover - why is that?

I have the following code:

$(".nav_button").hover(function(){
m = $(this).children("ul").css("display");
if (m == "none"){
    $(this).children("ul").slideDown(300);
}
else{
    $(this)开发者_运维知识库.children("ul").slideUp(300);
}
});

And alot of times it gets bugged, sometimes it slides, stays, etc. Any idea why is that and how to correct it?

---

Use this one instead to get rid of checks and other non-related code

$(".nav_button").hover(function(){
    $(this).children("ul").slideToggle(300);
});

This will automatically slideUp or slideDown your UL according to the current state.

this is from official jQuery documentation:

slideToggle(); Display or hide the matched elements with a sliding motion.

---

I can not see any error in your code, maybe it could be re-written like this.

$(".nav_button").hover(function(){
  m = $(this).children("ul");
  if (m.css("display") == "none"){
   m.slideDown(300);
  }
  else{
   m.slideUp(300);
  }
});

In this way you are looking the element only one time in the DOM

---

Use like this :

$(".nav_button").hover(function(){
     m = $("ul").css("display");
     alert(m);
     if (m == "none") {
         $("ul").slideToggle(300);        
     }
     else {
         $("ul").slideToggle(300);
     }
});

See the Demo: http://jsfiddle.net/rathoreahsan/JAA9q/4/

or You can use like this:

$(".nav_button").hover(function(){
    m = $("#toggleUL").css("display");
    alert(m);
    if (m == "none") {
        $("#toggleUL").slideToggle(300);        
    }
    else{
        $("#toggleUL").slideToggle(300);
    }
});

See the Demo: http://jsfiddle.net/rathoreahsan/JAA9q/7/

---

unless there is only one child 'ul', the m = $(this).children("ul").css("display") would return an array, so in the next statement if (m == 'none') it could break. You probably want a .each there to tread each ul