单击 2 次后，javascript 中动态更改高度属性不起作用。 我想在我点击时连续切换多次

Question

下面给出了我的简单代码显示我在做什么。 我很困惑它应该可以工作，但为什么它没有按预期工作。

 const caretEl = document.getElementById("caret"); const wrapperEl = document.getElementById("wrapper"); caretEl.addEventListener("click", function() { caretEl.childNodes[0].classList.toggle("fa-caret-up"); if (wrapperEl.style.height >= "20vh") { // wrapperEl.style.paddingBottom = "1vh"; wrapperEl.style.height = "8vh"; console.log("gt 20vh"); // wrapperEl.style.overflow = "visible"; // wrapperEl.removeAttribute("overflow"); } else { // wrapperEl.style.paddingBottom = "2vh"; wrapperEl.style.height = "20vh"; console.log("lt 20vh"); // wrapperEl.style.overflow = "hidden"; } return wrapperEl.style.height; })

 .wrapper { width: 30vw; height: 8vh; overflow: hidden; padding-bottom: 1vh; margin: 20vh auto; border: 1px solid grey; } .wrapper-header { width: 28vw; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .caret { display: block; width: 10px; height: 10px; border: 2px solid black; } .content { margin-top: 19px; }

 <div class="wrapper" id="wrapper"> <div class="wrapper-header"> <p> <b>60%</b> completed. <a href="#">Check the next step</a> </p> <span id="caret"><i class="fas fa-caret-down"></i></span> </div> <div class="content"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> </div>

单击插入符号时，我希望“包装器”div 的高度动态更改，但代码似乎只运行了两次。 它不会再运行了。

Answer 1

我相信错误在于比较。 由于 '20vh' 和 '8vh' 是字符串，而 '8' 是按时间顺序在 '2' 之后的，所以它导致任何以 '8' 开头的字符串都大于任何以 '2' 开头的字符串，即使一个只是“8”，另一个“200”。

我认为将您的 if 语句切换为：

if (parseInt(wrapperEl.style.height) >= 20)

应该可以解决问题。

不过，我要指出的是，即使单独使用 CSS，还有其他解决方案可以创建可扩展的部分，这些都值得研究。 这是一个例子。