需要单击按钮两次才能触发脚本

Question

我有以下问题：我必须单击按钮两次以使脚本工作，我不知道为什么。我试图通过搜索阅读一些帖子，但没有一个帖子解决了我的问题。

谢谢您的帮助。

#div1{width: 400px; background-color: beige; transition: 1s}
.div2{background-color: aquamarine}
.div2 button{float: right; width: 50px;cursor: pointer; outline: none}
.div2 p{height: 0px;overflow: hidden;transition: 1s}
.div3 img{padding: 5%}

<div id="div1">
<div class="div2">
	<h3>prova 1<button id="buttonst" onClick="showtext()">+</button></h3>
	<p id="ptext">lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, </p>
	<script>
	function showtext(){
	var but = document.getElementById("buttonst");
	var p = document.getElementById("ptext");
	var div = document.getElementById("div1");
		if (p.style.height === "0px"){
			but.innerHTML = "v";
			p.style.height = "200px";
			div.style.backgroundColor = "aquamarine";
		} else {
			but.innerHTML = "+";
			p.style.height = "0px";
			div.style.backgroundColor = "beige";
		}
	}
	</script>
	</div>
	<div class="div3">
	<img src="imagefile" alt="" width="90%">
	</div>
</div>

Answer 1

第一次它进入你的函数的else块。我解决了添加style =“height：0”的问题

标签。

<div id="div1">
<div class="div2">
<h3>prova 1<button id="buttonst" onClick="showtext()">+</button></h3>
<p id="ptext" style="height:0">lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, 
lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, </p>
<script>
function showtext(){

var but = document.getElementById("buttonst");
var p = document.getElementById("ptext");
var div = document.getElementById("div1");
    if (p.style.height === "0px"){

        but.innerHTML = "v";
        p.style.height = "200px";
        div.style.backgroundColor = "aquamarine";
    } else {

        but.innerHTML = "+";
        p.style.height = "0px";
        div.style.backgroundColor = "beige";
    }
}
</script>
</div>
<div class="div3">
<img src="imagefile" alt="" width="90%">
</div>
</div>

Answer 2

您的代码检查ptext元素的style属性，该元素仅引用内联样式。由于高度是由CSS类应用而不是内联样式。

正如Kurohige所建议的那样，您可以从一开始就将高度添加为内联样式，或者如果您希望使用当前的CSS，则可以在this question中提出一个可能的解决方案。