【问题标题】：Jquery Slide Down show div with loopJquery Slide Down 显示带有循环的 div
【发布时间】：2016-05-08 15:54:26
【问题描述】：

我有多个带有嵌套 div 的复杂 div，包括文本和图像。当页面加载时，我正在显示 4 个 div。下面显示了一个按钮，其中包含显示更多内容的选项。每次用户按下显示更多按钮时，我都会使用 Jquery 向下滑动并显示接下来的 2 个 div。总共有 28 个 div，所以它将是 14 行。一旦所有的 div 都可见，按钮将变为“显示更少”，其余的 div 将向上滑动或隐藏（尚未进入这部分）

由于某种原因，JsFiddle 甚至无法正常工作:(，我不是最擅长 JavaScript。下面是代码和 Jsfiddle 链接。我在示例中制作了简单的 div。

JsFiddle

Link To Js Fiddle

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

Link To Js Fiddle

【问题讨论】：

您的代码中有一些错字。 JS 的第二行应该是 hidden-2。而你的html没有任何按钮代码？
(OT) <center> 标签已弃用，请改用 CSS 的 text-align: center;。
它可以在我的 wordpress 网站上运行，但不能在 js fiddle 上运行...为什么 div 没有隐藏？
您正在添加一个 hide 类，但我在 CSS 中没有看到 .hide { display: none; } 或类似名称。
非常感谢，我觉得我很傻 xD 以为我是从 wp 风格复制的..很累 xD 但我的功能仍然无法正常工作....我已经更新了票和小提琴跨度>

标签： javascript jquery html css

【解决方案1】：

给你。

你的 if 在函数之外，所以这就是它不起作用的原因，也更新了，所以你可以在它们全部显示后隐藏它们。

我还从 a 标记中删除了 href，因为它导致页面一直向上。如果您没有可访问的链接，则不应将 href 放在标签中

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;
}

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');

【讨论】：