SharePoint中的JQuery Hover SlideToggle跳转和行为异常

Question

我有一个包含组的SharePoint列表，然后组中的每个元素都有标题和描述。 我试图创建一组嵌套的jquery悬停幻灯片，以显示该组中的项目，然后再显示其描述。 我最初体验到的行为是页面中CSS和脚本的结果，但是即使仅移动了我需要的内容，它仍然具有该行为。 有谁知道是什么原因引起的？ 请注意，我无法编辑所有HTML，因此由于共享点的工作原理，对代码所做的任何更改都必须通过css或js进行。

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

您基本上是在堆叠动画。 您可以使用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');    
    });

});

这是一个jFiddle 。