JQuery Hover SlideToggle dans SharePoint saute et se comporte mal

Question

J'ai une liste SharePoint qui a des groupes, puis chacun des éléments du groupe a un titre et une description. J'essayais de créer un ensemble imbriqué de slidetoggles de jquery hover qui indiquerait les articles dans ce groupe puis la description. Le comportement que j'ai ressenti pour la première fois était le résultat du CSS et des scripts dans la page mais même après avoir déplacé seulement ce dont j'avais besoin pour jsfiddle, il avait toujours le comportement. Est-ce que quelqu'un sait ce qui pourrait causer les problèmes? Comme une note, tout le HTML que je ne peux pas modifier, tout changement apporté au code devrait être via css ou js à cause du fonctionnement de sharepoint.

https://jsfiddle.net/794qdoxn/

  $(document).ready(function(){ 

       $('.cbq-layout-main li ul').hide(); 

       $('.cbq-layout-main ul li').hover(function() { 
       $(this).find('ul').slideToggle('slow'); 

       }, function() { 
       $(this).find('ul').slideToggle('slow'); 

       }); 

      }); 

      $(document).ready(function(){ 

       $('.dfwp-list div div').hide(); 

       $('.dfwp-list li div').hover(function() { 
       $(this).find('div').slideToggle('slow'); 

       }, function() { 
       $(this).find('div').slideToggle('slow'); 

       }); 

      }); 

Answer 1

Vous essentiellement des animations d'empilement. Vous pouvez utiliser la fonction jQueries stop().

$(function() { 

    $('.cbq-layout-main li ul').hide(); 

    $('.cbq-layout-main ul li').hover(function() { 
     $(this).find('ul').stop().slideToggle('slow'); 
    }, function() { 
     $(this).find('ul').stop().slideToggle('slow');  
    }); 

    $('.dfwp-list div div').hide(); 

    $('.dfwp-list li div').hover(function() { 
     $(this).find('div').stop().slideToggle('slow'); 
    }, function() { 
     $(this).find('div').stop().slideToggle('slow');  
    }); 

}); 

Voici un jFiddle.