SharePoint内のJQuery Hover SlideToggleがジャンプし、正しく動作しない

Question

グループを持つSharePointリストがあり、そのグループの各要素にタイトルと説明があります。私はそのグループの中の項目を明らかにするjquery hover slidetogglesのネストされたセットを作成しようとしていました。私が最初に経験した振る舞いは、ページ内のCSSとスクリプトの結果だと思っていましたが、私がjsfiddleに必要なものだけを動かした後も、それはまだ動作していました。誰が問題を引き起こしているのか知っていますか？注記として、すべてのHTMLを編集することはできないので、コードに加えられた変更は、sharepointの仕組みのせいで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

あなたは基本的にアニメーションを積み重ねています。 jQueryの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があります。