The accordion don't stop when applying a hover mouse

Question

I am using the accordion to display the subcategories of each category.

My Problem is that I can't go to the subcategory of a category because it closes after the mouse out.

I want to keep the same architecture of the html:
Currently I have

jQuery(function($) {
  $('ul.r-list h1').hover(function() {
    $(this).next().stop(true, true).slideDown()
  }, function() {
    $(this).next().stop(true, true).slideUp()
  }).find($(this).next()).hide()
});

ul.r-list li ul {
  display: none;
}



  
    
      
      Parent Category
      (8)
    
    
      
        sub Category1
        (5)
      
      
        sub Category2
        (1)
      
      
        sub Category3
        (2)

Expected result:
when I go to child category the animation stop and when I mouse out it automatically closes.

Current result:
when i go to child category the animation didn't stop

Thanks in advance

user_2003070 · Answer

Listen to the hover event on the whole ul.r-list li so the mouse out event does not fire when you move from h1 to ul. Then in the event handler functions find ul inside current this element and slide it up/down.

jQuery(function ($) {
    $('ul.r-list li').hover(function () {
      $(this).find('ul').stop(true,true).slideDown()
    },function(){
      $(this).find('ul').stop(true,true).slideUp() 
    }).find($(this).next()).hide()
});

ul.r-list li ul {
display:none;
}



 
  
   
   Parent Category
   (8)
  
  
   
    sub Category1
    (5)
   
   
    sub Category2
    (1)
   
   
    sub Category3
    (2)

user_383904 · Answer

You were close. Add a class like r-hasSublist to the common LI element (that wraps H1 and the UL sublist). Target that class to keep the hover's mouseenter event active.

Inside the .hover() method you can than use simply $('> ul', this).stop().slideToggle();

jQuery(function($) {

  $('.r-hasSublist').hover(function() {
    $('> ul', this).stop().slideToggle();
  });
  
});

.r-hasSublist ul {
  display: none;
}


  
    
      
      Parent Category
      (8)
    
    
      
        sub Category1
        (5)
      
      
        sub Category2
        (1)
      
      
        sub Category3
        (2)

The accordion don't stop when applying a hover mouse

2 Answers