我有多个带有嵌套 div 的复杂 div,包括文本和图像。当页面加载时,我显示了 4 个 div。下面显示了一个按钮,其中包含显示更多的选项。每次用户按下显示更多按钮时,我都会使用 Jquery 向下滑动并显示接下来的 2 个 div。总共有 28 个 div,所以它将是 14 行。一旦所有的 div 都可见,按钮将变为“显示较少”,其余的 div 将向上滑动或隐藏(尚未到达这一部分)
出于某种原因,JsFiddle 甚至不能正常工作:(,我不是最擅长 JavaScript 的。下面是代码和 Jsfiddle 链接。我在示例中制作了简单的 div。
JsFiddle
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;" href="#">SEE MORE</a></span></center>
JS
var count = 0;
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');
$("#showmoreleaders").click(function() {
count++;
});
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
}
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.hide {
display: none;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
JsFiddle
最佳答案
给你。
您的 if 在函数之外,所以它不起作用,还进行了更新,以便您可以在它们全部显示后隐藏它们。
我还从 a 标签中删除了 href,因为它导致页面一直向上移动。如果你没有链接,你不应该把 hrefs 放在标签上
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;">SEE MORE</a></span></center>
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.hide{
display: none;
}
#showmoreleaders{
cursor: pointer;
}
JS
var count = 0;
$("#showmoreleaders").click(function() {
count++;
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
$('#showmoreleaders').html('SEE LESS');
}
if (count == 4) {
$(".leaders-hidden-3").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 5) {
$(".leaders-hidden-2").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 6) {
$(".leaders-hidden").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 7) {
$('#showmoreleaders').html('SEE MORE');
count = 0;
}
});
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');
关于javascript - Jquery Slide Down 显示带循环的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37101796/