我正在构建一个新闻提要,其中包含显示摘要的幻灯片和一个阅读更多按钮,单击该按钮会显示其余内容。
这是一个 jsFiddle:http://jsfiddle.net/pbunz5ue/1/
当单击“阅读更多”时,故事会打开并且滚动停止,然后用户单击“更少”,它会隐藏故事并继续滚动。
单击“阅读更多”时,我需要对齐 div 的滚动条,以便打开的故事从 div 的顶部开始。我的 slider 在故事制作的第一轮中完美地做到了这一点,一旦它们从按钮上第二次显示,它就不再起作用了。
有人能解释一下为什么吗??
这是我的代码:
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");
}
}
});
最佳答案
问题是由 .news-list 的负“顶部”位置破坏了打开元素的位置引起的。
-> 我更新你的 fiddle :http://jsfiddle.net/pbunz5ue/3/ <-
我改变了什么
主要错误:
当你计算位置时你没有考虑新闻容器
.news-list
向上滑动时的负top
偏移:我改变了这两行:
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');
我删除了函数中的那些,因为它们看起来没用。
编辑::.点击问题
试试这两种方法来解决您的问题:
1.
如果您在将新元素添加到列表中时遇到问题,请尝试将事件绑定(bind)到“元素”容器 .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 操作期间永远不会改变。
2.
另一种方法是在您的代码中更改此行:
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
元素,(我认为)您解除了所有事件的绑定(bind),因为您从 DOM 中删除了该元素,但您不需要删除,您需要将它从上到下移动。这样可以防止 click
事件的解除绑定(bind)。
我希望能理解问题:)。
抱歉英语不好
关于javascript - 在 Slider Div 上设置滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29561999/