javascript - 如何使用 JAVASCRIPT 折叠 div

Question

如何使用 JAVASCRIPT 调用 div。

否 AJAX、否 JQuery，仅纯 JavaScript。

我的尝试不起作用。

示例:

<button type="button" onclick="test();">click!</button>

<div id = "page">
a
<br>
b
<br>
c
<br>
d
<br>
e
<br>
f
</div>  

<script type="text/javascript">
function test() {
    var height = document.getElementById('page').offsetHeight;
    myLoop(height);
}


function myLoop (height) {           
   setTimeout(function () {                      
      if (height > 0) {      
        console.log(height);
        height--;     
        document.getElementById('page').style.width=height+'px';
        myLoop(height);             
      }                        
   }, 1)
}
</script>

你能帮我一下吗？谢谢。

Answer 1

这可以通过 CSS 转换来完成，非常容易。不需要setTimeout()。您只需要 JavaScript 即可触发添加直接调整元素的高度的 CSS 类。 CSS transition property 将为您执行高度的实际动画。

这是一个比 setTimeout() 更好的解决方案，因为(取决于客户端的处理能力)，setTimeout() 会导致动画抖动，并且 CSS就性能而言更便宜。

var target = null;

window.addEventListener("DOMContentLoaded", function(){
  // Get reference to target and store in higher scoped variable
  // so that we don't have to scan for it again later.
  target = document.getElementById('page');
  
  var h = window.getComputedStyle(target).height; // Get its computed height
  target.style.height = h;                        // Set that height explicitly
});


// ****************************************************************
// Get reference to button "trigger" and set up 
// a click event handler for it. Do this in JavaScript,
// not via HTML event attributes such as "onclick".
var btn = document.getElementById("btnHide");
btn.addEventListener("click", hide);

function hide() {
  // Simply apply a class that resets the height.
  // Since the element is pre-configured for a transition
  // the change in height will be animated.
  target.classList.add("hidden");
}


// ****************************************************************
var btn = document.getElementById("btnShow");
btn.addEventListener("click", show);

function show() {
  // Just remove the class that cause the element to become hidden
  target.classList.remove("hidden");
}

// ****************************************************************
// This code makes the show/hide happen with just one button "trigger"

var btn = document.getElementById("btnToggle");
btn.addEventListener("click", toggle);

function toggle() {
  // Just remove the class that cause the element to become hidden
  target.classList.toggle("hidden");
}

/* Default style for element to be animated */
.target {
  /* This sets up a transition on all properties that may change in the future
     to animate to their new value over the course of 2 seconds. */
  transition:all 2s; 
  
  /* This is needed for the contents to actually disappear. Without it,
     as the div shrinks, the content will just overflow the boundaries
     of the div and continue to show. */
  overflow:hidden;   
}

/* This gets applied upon the click of the trigger button. 
   !important is required to override inline style applied
   via code.
*/
.hidden { height:0 !important; }

<button type="button" id="btnHide">Hide</button>
<button type="button" id="btnShow">Show</button>
<button type="button" id="btnToggle">Toggle Show/Hide</button>

<div id = "page" class="target">
a
<br>
b
<br>
c
<br>
d
<br>
e
<br>
f
</div>