onclick 触发器在第一次单击时不起作用

Question

我制作了这个按钮，但在第一次点击时它不起作用。 当我单击两次时，它就可以工作；； 有什么我想念的吗？ 还是有什么不对？ 任何帮助将不胜感激:) 谢谢！

 function myFunction99() {
    var gwbtn = document.getElementById("discountbigbox");
    var gwbtnbig = document.getElementById("discountprice");
    if (gwbtn.style.height === "0px") {
        gwbtn.style.height = "210px";
        gwbtnbig.style.border = "1px solid black";
        gwbtnbig.style.color = "black";
    } else {
        gwbtn.style.height = "0px";
        gwbtnbig.style.border = "1px solid #cccccc";
        gwbtnbig.style.color = "#999";
    }
  }

#discountbigbox {width:100%;
                 height:0px;
                 overflow:hidden;
                 text-align:left;
                 background-color: #f7f9ff;
                 margin-bottom:20px;
                 transition: all 0.5s ease;
                 font-size:13px;
                 margin-top:45px;

}

#discountprice { border: 1px solid #cccccc;
    width: fit-content;
    float: right;
    padding: 0px 10px;
    border-radius: 4px;}
    
#discountprice:hover { border: 1px solid black;
                       color:black;}    

<div id="discountprice" onclick="myFunction99()" > &#43; click this button</div>

<div id="discountbigbox"> 
  <p>test</p>
</div>

Answer 1

第一次点击height属性值为空，添加条件检查为空：

if (gwbtn.style.height === "0px" || gwbtn.style.height === "") {

function myFunction99() {
    var gwbtn = document.getElementById("discountbigbox");
    var gwbtnbig = document.getElementById("discountprice");
    if (gwbtn.style.height === "0px" || gwbtn.style.height === "") {
        gwbtn.style.height = "210px";
        gwbtnbig.style.border = "1px solid black";
        gwbtnbig.style.color = "black";
    } else {
        gwbtn.style.height = "0px";
        gwbtnbig.style.border = "1px solid #cccccc";
        gwbtnbig.style.color = "#999";
    }
  }

#discountbigbox {width:100%;
  height:0px;
  overflow:hidden;
  text-align:left;
  background-color: #f7f9ff;
  margin-bottom:20px;
  transition: all 0.5s ease;
  font-size:13px;
  margin-top:45px;

}

#discountprice { 
  border: 1px solid #cccccc;
  width: fit-content;
  float: right;
  padding: 0px 10px;
  border-radius: 4px;
}

#discountprice:hover { 
  border: 1px solid black;
  color:black;
}

<div id="discountprice" onclick="myFunction99()" > &#43; click this button</div>

<div id="discountbigbox"> 
  <p>test</p>
</div>

Answer 2

height 属性开始时未设置（即为空）。在 CSS 中设置它并不意味着 DOM 中的 JS 样式属性中有一个值——它从元素的内联样式属性中读取。

如果您在最初的 if 中考虑到这一点，那么它会正常工作：

if (gwbtn.style.height === "0px" || !gwbtn.style.height) {

演示：

function myFunction99() {
    var gwbtn = document.getElementById("discountbigbox");
    var gwbtnbig = document.getElementById("discountprice");
    console.log(gwbtn.style.height);

    if (gwbtn.style.height === "0px" || !gwbtn.style.height) {
        gwbtn.style.height = "210px";
        gwbtnbig.style.border = "1px solid black";
        gwbtnbig.style.color = "black";
    } else {
        gwbtn.style.height = "0px";
        gwbtnbig.style.border = "1px solid #cccccc";
        gwbtnbig.style.color = "#999";
    }
  }

#discountbigbox {width:100%;
                 height:0px;
                 overflow:hidden;
                 text-align:left;
                 background-color: #f7f9ff;
                 margin-bottom:20px;
                 transition: all 0.5s ease;
                 font-size:13px;
                 margin-top:45px;

}

#discountprice { border: 1px solid #cccccc;
    width: fit-content;
    float: right;
    padding: 0px 10px;
    border-radius: 4px;}
    
#discountprice:hover { border: 1px solid black;
                       color:black;}

<div id="discountprice" onclick="myFunction99()" > &#43; click this button</div>

<div id="discountbigbox"> 
  <p>test</p>
</div>

---

或者，您可以使用getComputedStyle 来检测在考虑样式表时计算出的元素的样式值：

function myFunction99() {
    var gwbtn = document.getElementById("discountbigbox");
    var gwbtnbig = document.getElementById("discountprice");
    var st = getComputedStyle(gwbtn);
    console.log(st.height);
    
    if (st.height === "0px") {
        gwbtn.style.height = "210px";
        gwbtnbig.style.border = "1px solid black";
        gwbtnbig.style.color = "black";
    } else {
        gwbtn.style.height = "0px";
        gwbtnbig.style.border = "1px solid #cccccc";
        gwbtnbig.style.color = "#999";
    }
  }

#discountbigbox {width:100%;
   height:0px;
   overflow:hidden;
   text-align:left;
   background-color: #f7f9ff;
   margin-bottom:20px;
   transition: all 0.5s ease;
   font-size:13px;
   margin-top:45px;

}

#discountprice { border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;}

#discountprice:hover { border: 1px solid black;
         color:black;}

<div id="discountprice" onclick="myFunction99()" > &#43; click this button</div>

<div id="discountbigbox"> 
  <p>test</p>
</div>

Answer 3

您需要涵盖“空白或零”和“210”两种状态。

您可以制作不同的 if 逻辑以仅使用固定值，例如：

if (thing.style.height !== "210px") {
  // it's blank or zero
} else {
  // it's 210
}