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>

单击插入符号时，我希望“ wrapper” div的高度动态变化，但是代码似乎只运行了两次。而且它不会再运行了。请提出建议。

Answer 1

我相信错误在于比较。因为'20vh'和'8vh'是字符串，并且'8'按时间顺序在'2'之后，所以即使以'8'开头的任何字符串都比以'2'开头的任何字符串大， '8'，另一个'200'。

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

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

应解决问题。

尽管我会指出，还有其他一些用于创建可扩展部分的解决方案，即使仅使用CSS，也值得研究。 Here is an example.

Answer 2

您正在尝试将字符串值与不正确的字符串值进行比较，

所以您需要使用getBoundingClientRect()并获取实际的高度值，

然后使用wrapperEl.getBoundingClientRect().height >= 80比较值。

这里20vh的真实值等于81.2，因此在80之上进行比较。

您只需进行if语句之类的更改，

if (wrapperEl.getBoundingClientRect().height >= 80)

下面的工作示例片段，

const caretEl = document.getElementById("caret");
const wrapperEl = document.getElementById("wrapper");
caretEl.addEventListener("click", function() {
  caretEl.childNodes[0].classList.toggle("fa-caret-up");
  if (wrapperEl.getBoundingClientRect().height >= 80) {
    // 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;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>