为什么每次单击显示按钮时都会改变样式

Question

我是javascript的新手
我正在尝试对"显示更多"；按钮
我在它下面添加了一个文本和一个向下箭头，但当我单击它时，显示较少的按钮"我不知道如何设计它"显示时包含隐藏的内容，然后当我再次单击它时，显示更多按钮时没有图标或样式。

function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.getElementById("moreButton");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "inline";
buttonText.innerHTML = "Show More";
} else {
showMoreText.style.display = "inline";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
}
}

.pink {
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton {
background-color: transparent;
border-color: transparent;
}

<span id="startpoint"></span>
<span id="more">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="filter-container">
<img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
</span>
<button onclick="toggleText()" id="moreButton">
<p class="pink">Show More</p> 
<img class="more" src="./images/downarrow" alt="arrow">
</button>

Answer 1

因为您在按钮中覆盖了p标记。使用此选择器var buttonText = document.querySelector("#moreButton p");类似于：

function toggleText() {
var showMoreText = document.getElementById("more");  
var buttonText = document.querySelector("#moreButton p");

if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "inline";
buttonText.innerHTML = "Show More";    
buttonText.classList.remove('green')
} else {
showMoreText.style.display = "inline";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('green')
}
}

.pink {
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton {
background-color: transparent;
border-color: transparent;
}
.green {
color: green;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<span id="startpoint"></span> 
<span id="more">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="filter-container">
<img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
</span>
<button onclick="toggleText()" id="moreButton">
<p class="pink">Show More</p> 
<img class="more" src="./images/downarrow" alt="arrow">
</button>

Answer 2

请尝试一下。代码不正确。你一直在跨度内跳水。

function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.getElementById("moreButton");
var arrowBtn = document.getElementById("arrowButton");

if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "inline";
buttonText.innerHTML = "Show More";
arrowBtn.style.display = "inline";
} else {
showMoreText.style.display = "inline";
arrowBtn.style.display = "none";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
}
}

.pink {
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton {
background-color: transparent;
border-color: transparent;
cursor: pointer
}

<span id="startpoint"></span>
<span id="more">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="filter-container">
<img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
</span>
<button onclick="toggleText()">
<span class="pink" id="moreButton">Show More</span> 
<img class="more" src="./images/downarrow" alt="arrow" id="arrowButton">
</button>