[英]Jquery Slide Down show div with loop
我有多个带有嵌套div的复杂div,包括文本和图像。 页面加载后,我将显示div的4个。 下面显示了一个带有更多选项的按钮。 每次用户使用Jquery向下滑动显示更多按钮im并显示接下来的2个div。 共有28个div,因此它将是14行。 一旦所有div都可见,则按钮将变为“显示较少”,其余div将向上滑动或变为隐藏状态(尚未到此部分)
由于某种原因,JsFiddle甚至无法正常工作:(,我不是最擅长JavaScript。下面是代码和Jsfiddle Link。在示例中,我做了简单的div。
<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>
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.
});
}
.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;
}
干得好。
您将if置于函数之外,这就是为什么它不起作用的原因,并且也进行了更新,以便在它们全部显示后可以将其隐藏。
我也从标签中删除了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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.