我正在构建一个包含幻灯片的新闻源,这些幻灯片显示摘要和更多按钮,点击后会显示其余内容。
这是一个jsFiddle:http://jsfiddle.net/pbunz5ue/1/
单击“阅读更多”时,故事将打开,滚动停止,然后用户单击“更少”,它会隐藏故事并继续滚动。
单击“阅读更多”时,我需要对齐div的滚动,以便打开的故事从div的顶部开始。我的滑块在故事的第一轮完美地完成了这一点,一旦它们从按钮向上显示第二次这不再有效。
有人可以解释原因吗?
这是我的代码:
JS:
$(document).ready(function() {
//User clicks Read More, add 'open' class to news item
$('.news-read-more').on('click', function() {
blockedSlider = true;
clearInterval(myTimer);
$('.news-list').children('li').each(function() {
$(this).removeClass('open');
});
$(this).parent().toggleClass('open');
var n = $(this).parent();
var pos = n.position();
$('.news-slider-wrapper').scrollTop(pos.top);
});
//User clicks Less, remove 'open' class from news item
$('.news-read-less').on('click', function() {
if (blockedSlider == true) {
blockedSlider = false;
$(this).parent().removeClass('open');
myTimer = setInterval(slideLoop, 2000)
}
});
var myTimer = setInterval(slideLoop, 2000)
var blockedSlider = false;
function slideLoop() {
// Work out width of current slider size
var widthPx = $('.news-list-item').css('height');
var width = widthPx.substring(0, widthPx.length - 2);
// Work out current left
var left = $('.news-list').css('top');
left = left.substring(0, left.length - 2);
if (left <= -(width * 2)) {
var neg = '-' + widthPx;
$('.news-list').css('top', neg);
var slide = $('.news-list li:first');
$('.news-list').children('li:first').remove();
$('.news-list ').append(slide);
//User clicks Read More, add 'open' class to news item
$('.news-read-more').on('click', function() {
blockedSlider = true;
clearInterval(myTimer);
$('.news-list').children('li').each(function() {
$(this).removeClass('open');
});
$(this).parent().toggleClass('open');
var n = $(this).parent();
var pos = n.position();
$('.news-slider-wrapper').scrollTop(pos.top - 360);
});
//User clicks Less, remove 'open' class from news item
$('.news-read-less').on('click', function() {
if (blockedSlider == true) {
blockedSlider = false;
$(this).parent().removeClass('open');
myTimer = setInterval(slideLoop, 2000)
}
});
var move = "-=" + widthPx;
$('.news-list').animate({ top: move }, "slow", "swing");
}
else {
var move = "-=" + widthPx;
$('.news-list').animate({ top: move }, "slow", "swing");
}
}
});
答案 0 :(得分:1)
问题是由负面的&#34; top&#34; .news-list的位置,它破坏了已打开元素的位置。
- &GT;我更新你的小提琴:http://jsfiddle.net/pbunz5ue/3/&lt; -
主要错误:
当您计算位置时,您在新闻容器top
向上滑动时不会被视为负.news-list
偏移量:
我改变了这两行:
var pos = n.position();
$('.news-slider-wrapper').scrollTop(pos.top);
在:
var pos = n.position().top + parseInt($(".news-list").css("top")) || n.position().top;
$('.news-slider-wrapper').scrollTop(pos);
如果$(".news-list")
位于最高位置,我会将其添加到位置计算中(如果结果为auto
,则会出现阻止NaN
结果|| n.position().top
)的回退
您已经复制了处理程序$('.news-read-more').on('click')
和$('.news-read-less').on('click');
我删除了函数中的那些,因为它们似乎没用。
尝试这两种方法来解决您的问题:
如果在将新项目添加到列表中时遇到问题,请尝试将事件绑定到&#34;项目&#34;容器.news-list
并在每次触发时过滤选择器:
$('.news-read-more').on('click', function() { //...
$('.news-read-less').on('click', function() { //...
变为:
$('.news-list').on('click','.news-read-more', function() { //...
$('.news-list').on('click','.news-read-less', function() { //...
容器.news-list
在动画和DOM操作期间永远不会改变。
另一种方法是在代码中更改此行:
var slide = $('.news-list li:first');
$('.news-list').children('li:first').remove();
$('.news-list ').append(slide);
变为:
var slide = $('.news-list li:first');
$('.news-list ').append(slide);
或:
$('.news-list ').append('.news-list li:first');
如果您.remove
元素,(我认为)您取消绑定所有事件,因为您从DOM中删除了元素,但您不需要删除,您需要将其从上到下移动。这样可以防止click
事件的解除绑定。
我希望能够理解这个问题:)。
对不起,可能是英文不好