时间戳

首页 > 解决方案 > dropDown 功能 - 多次按下且快速 setTimeout 删除边框时，高度为 500px

javascript - dropDown 功能 - 多次按下且快速 setTimeout 删除边框时，高度为 500px

问题描述

首先，不，我不会使用 jQuery。

所以，我有这个项目我正在做，我想做一个滑动切换元素。在我快速按下按钮之前，一切都很好。然后边框消失，元素已达到其最终高度（在本例中为 500 像素）。

也许我的解释不是那么准确，但我会给你代码。

var div = document.getElementById('div');
var btn = document.getElementById('button');

function clickFunction(){
	if(div.style.height === "0px") {
     div.style.height = "500px";
     div.style.borderStyle = "solid";
  } else {
  div.style.height = "0px";
   setTimeout(function(){div.style.borderStyle = "none";}, 500);
  }
}

btn.onclick = clickFunction;
div#div { 
transition: 500ms ease;
width: 100px;
height: 200px;
margin-top: 20px;
}

.container {
  width: 120px;
  background-color: red;
  padding: 8px;
}
<button id="button">
Press me
</button>
<div class="container">
<div id="div" style="border-style: none; border-width: 2px; height: 0px;"></div>
</div>

我也尝试使用 clearTimeout() 但它不起作用。是的，我设置setTimeout为一个变量，但它没有做任何事情。

有任何想法吗？干杯。

标签： javascripthtmlcss

解决方案

您当前的代码使用内联样式和id选择器的组合，以及由 JavaScript 在if/then和setTimeout()回调中更新的内联样式。所有这些说明，再加上客户端重新绘制 UI 的速度，都导致了这个问题。

通过清理切换样式的方法以及首先如何应用样式，指令和时序方面的潜在冲突要少得多。

从 HTML 中删除所有静态样式，并为元素的正常和展开状态设置 CSS 类。然后只需使用该element.classList.toggle()方法即可无缝切换扩展类的使用。不需要计时器。

var div = document.getElementById('div');
var btn = document.getElementById('button');

btn.addEventListener("click", function(){
  div.classList.toggle("expanded");
});
.container {
  width: 120px;
  background-color: red;
  padding: 8px;
}

.normal { 
  transition: 500ms ease;
  width: 100px;
  margin-top: 20px;
  border:0px solid black; 
  height: 0px;
}

.expanded {
  height: 200px;
  border:2px solid black;
}
<button id="button">Press me</button>
<div class="container">
  <div id="div" class="normal"></div>
</div>

笔记：

设置id基于的 CSS 选择器时要小心，因为它们以后很难覆盖。我并不是说永远不要使用它们，但通常情况下，CSS 类提供了最灵活的解决方案并有助于避免 gobs 和 gobs 的内联样式。

推荐阅读