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 。