更新以包含基本小提琴:http://jsfiddle.net/g28nc89t/1/
假设我有一组使用重复模式的div,不是无序列表,它遵循以下结构:
<div class="one cards">
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
</div>
<div class="two cards">
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
</div>
使用jQuery,如何隐藏第三个项目后的每个“卡片”并创建一个切换来显示/隐藏隐藏的卡片。考虑到卡片UI使用相同的类,我不希望切换显示/隐藏所有卡片块仅用于该部分的卡片。我可以为每个卡块添加id或更具体的类。
我正在使用以下js,它们目前正在切换每个卡片实例,而只是切换该部分。它还会触发两个块之间的Show More和Show Less:
$('.cards').each(function(){
var max = 2
if ($(this).find(".card").length > max) {
$(this)
.find('.card:gt('+max+')')
.hide()
.end()
.append(
$('<div class="toggle"><a class="more">Show More</a></div>').click( function(){
$('.card:gt('+max+')').toggle();
if ( $('.more').length ) {
$(this).html('<a class="less">Show Less</a>');
} else {
$(this).html('<a class="more">Show More</a>');
};
})
);
}
});
该网站是响应式的,虽然我想要某种滑动/滑动动画,但我觉得这种情况并不实用。任何帮助将不胜感激。我尝试使用此堆栈作为指南:Jquery, hide & show list items after nth item
答案 0 :(得分:0)
你可以使用jQuery的slice()来抓取第三个之后的所有元素并隐藏它们。请记住,所有这些元素仍然会被下载到浏览器中,因此如果用户不扩展它们,它们将被隐藏起来并且基本上是浪费精力。一个更好的解决方案可能是只加载前三张卡,然后使用ajaxy加载来加载其余的卡。
以下是您可以按照自己的要求做的事情:
http://codepen.io/anon/pen/Qwmvmx
$( document ).ready(function() {
cards = $('.cards');
$.each(cards, function(key,value) {
$(this)
.find('.random_cms-class')
.slice(3)
.hide();
});
$('.show_more').show();
});
$('.show_more a').click(function() {
$(this).parent().parent().find(":hidden").show();
});
.random_cms-class {
display: inline-block;
}
.card {
width: 75px;
height: 75px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards">
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="show_more">
<a href="#">Show all...</a>
</div>
</div>
<div class="two cards">
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="show_more">
<a href="#">Show all...</a>
</div>
</div>