[英]JQuery Hover SlideToggle in SharePoint jumps and misbehaves
I have a SharePoint list that has groups and then each of the elements in the group has a title and a description. 我有一个包含组的SharePoint列表,然后组中的每个元素都有标题和描述。 I was attempting to create a nested set of jquery hover slidetoggles that would reveal the items in that group then the description. 我试图创建一组嵌套的jquery悬停幻灯片,以显示该组中的项目,然后再显示其描述。 The behavior I first experienced I thought was a result of the CSS and scripts within the page but even after moving only what I needed to jsfiddle, it still had the behavior. 我最初体验到的行为是页面中CSS和脚本的结果,但是即使仅移动了我需要的内容,它仍然具有该行为。 Does anyone know what could be causing the issues? 有谁知道是什么原因引起的? As a note, all the HTML I cannot edit so any changes made to the code would have to be via css or js because of how sharepoint works. 请注意,我无法编辑所有HTML,因此由于共享点的工作原理,对代码所做的任何更改都必须通过css或js进行。
https://jsfiddle.net/794qdoxn/ 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');
});
});
You basically are stacking animations. 您基本上是在堆叠动画。 You could use jQueries stop() function. 您可以使用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');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.