Question

我有一个带有三个div和一个按钮的html页面。 div2和div3被隐藏，div1从头开始显示。我想要做的是，当你按下按钮时，div 2出现在div 1下面，然后你再次按下按钮，div 3出现在div 1和2下面。我现在拥有的是：

<div id="div1" style="display:block;">
   Some stuff...
</div>

<div id="div2" style="display:none;">
   Some stuff...
</div>

<div id="div3" style="display:none;">
   Some stuff...
</div>

<a><img id="button" src="img/button.png" onclick="myFunc()" /></a>

和javascript：

function myFunc() {
    var d2 = document.getElementById("div2");
    var d3 = document.getElementById("div3");

    if ( d2.style.display == "none" ) {
        d2.style.display = "block";
    }

    if ( d2.style.display == "block" ) {
        d3.style.display = "block";
    }
}

这就是我所拥有的，但它同时显示div2和div3。任何关于如何做的想法将非常感谢！

Answer 1

您将需要一个计数器变量

var count = 0;
function myFunc() {
  count += 1;
  var d2 = document.getElementById("div2"),
      d3 = document.getElementById("div3");

  if (count === 1) {
    if (d2.style.display == "none") {
      d2.style.display = "block";
    }
  }
  if (count === 2) {
    if (d3.style.display == "none") {
      d3.style.display = "block";
    }
  }
}

Answer 2

我会改变HTML并使用类，比如

<div id="div1" style="display:block;">
   Some stuff...
</div>

<div class="divMagic" id="div2" style="display:none;">
   Some stuff...
</div>

<div class="divMagic" id="div3" style="display:none;">
   Some stuff...
</div>

<a><img id="button" src="img/button.png" onclick="myFunc()" /></a>

这样，你可以添加更多的div，它仍然可以工作。然后对于jQuery代码，这样的事情：

function myFunc() {

   $('body').find('.divMagic').filter(':hidden').eq(0).show();
}

我建议为div的容器更改$（＆＃39; body＆＃39;）。

Answer 3

如果你要使用jquery插件，我为这个需要创建了一个插件： https://github.com/fillswitch/Jquery-Sequential-Animations

它允许您循环遍历jquery集合并依次为每个集合设置动画。

Answer 4

div1是你按下扩展div2的div。 div 2下的内容列表当然是扩展后您将看到的内容。

脚本显示加载文档后，您可以单击div，单击时将向上或向下滑动。我没有做任何事情来控制速度。

这需要Jquery。

<div id="div1" style="cursor:pointer;">
EXPANDING COLLAPSING DIV
</div>
<div id="div2" style="display:none">
content<br />
content

</div>


<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function(){
    $("#div2").slideToggle();

});
});
</script>

Answer 5

或者，尝试更加面向对象的方法，并将“可见性”抽象为CSS类而不是内联样式。更加语义和可维护的代码，在页面上呈现时更容易理解。

<强> (DEMO)

修改HTML：

  <!-- First div is visible initially -->
  <div class="progressive visible">
    Some stuff...
  </div>

  <div class="progressive">
    Some stuff...
  </div>

  <div class="progressive">
    Some stuff...
  </div>

  <!-- An ID of 'button' isn't very descriptive -->
  <a><img id="displayNextButton" src="img/button.png" /></a>

新CSS：

.progressive {
  display: none;
}

.visible {
  display: block;
}

修订JavaScript：

function ProgressiveDisplayer() {
  this.elements = document.getElementsByClassName('progressive');
  this.currentlyVisible = 0;
}

ProgressiveDisplayer.prototype.displayNext = function() {
  if (this.currentlyVisible < this.elements.length - 1) {
    this.currentlyVisible++;
    this.elements[this.currentlyVisible].className += ' visible';
  }
}

var progressiveDisplayer = new ProgressiveDisplayer();

var displayNextButton = document.getElementById('displayNextButton');

displayNextButton.addEventListener('click', function() { progressiveDisplayer.displayNext(); });

Answer 6

要么使用if if而不是if if if或者更好地添加一个计数器并且计数器的值被附加以产生div的ID，例如＆＃39; div＆＃39; +计数器

如何用一个函数逐步显示div？

6 个答案: