我有一个包含组的SharePoint列表,然后该组中的每个元素都有一个标题和一个描述。我试图创建一组嵌套的jquery悬停slidetoggles,它将显示该组中的项目然后显示描述。我认为我第一次经历的行为是页面内的CSS和脚本的结果,但即使只移动了我需要的东西,它仍然有行为。有谁知道可能导致问题的原因是什么?作为一个注释,我无法编辑所有HTML,因此对代码所做的任何更改都必须通过css或js,因为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');
});
});
答案 0 :(得分:0)
你基本上是堆叠动画。您可以使用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。