我刚刚搜索了这个坚果，但没有找到任何东西。 所以我有 5 个按钮，当你点击它们时它会显示一个段落，如果你再次点击它会隐藏那个。但我想知道我如何制作按钮，就像你打开一个按钮并点击另一个按钮一样其余的按钮。我的意思是我想在单击并打开其中一个按钮时隐藏其他按钮。 如果你告诉我一个更好的方法来缩小这个代码，我将不胜感激。 这是整个页面的图像： https://uupload.ir/files/0xwx_desktop-design.jpg 您可以在右侧看到列表，所以我希望它就像我单击一个箭头图标时一样，另一个将关闭并隐藏内容。 这是按钮代码之一的示例，HTML 代码：
<ul>
<h1>FAQ</h1>
<li>
<button type="button" id="arrowbtn1">
<span id="span1">How many team members can I invite?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage1" class="arrowimage">
</button>
<p id="p1">
You can invite up to 2 additional users on the<br>
Free plan.There is no limit on team members for <br>
the Premium plan.
</p>
</li>
<li>
<button type="button" id="arrowbtn2">
<span id="span2">What is the maximum file upload size?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage2" class="arrowimage">
</button>
<p id="p2">
No more than 2GB. All files in your account must<br>
fit your allotted storage space.
</p>
</li>
<li>
<button type="button" id="arrowbtn3">
<span id="span3">How do I reset my password?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage3" class="arrowimage">
</button>
<p id="p3">
Click “Forgot password” from the login page or<br>
“Change password” from your profile page.<br>
A reset link will be emailed to you
</p>
</li>
<li>
<button type="button" id="arrowbtn4">
<span id="span4">Can I cancel my subscription?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage4" class="arrowimage">
</button>
<p id="p4">
Yes! Send us a message and we’ll process your<br>
request no questions asked.
</p>
</li>
<li>
<button type="button" id="arrowbtn5">
<span id="span5">Do you provide additional support?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage5" class="arrowimage">
</button>
<p id="p5">
Chat and email support is available 24/7. Phone<br>
lines are open during normal business hours.
</p>
</li>
</ul>
CSS 代码：
ul {
width: fit-content;
position: absolute;
top: 30px;
right: 60px;
list-style-type: none;
}
h1 {
position: relative;
left: -40px;
color: hsl(238, 29%, 16%);
}
li {
width: 400px;
position: relative;
left: -40px;
padding-top: 10px;
padding-bottom: 5px;
color: hsl(240, 6%, 50%);
border-bottom: 2px solid hsl(240, 5%, 91%);
}
button {
width: 100%;
height: 25px;
border: none;
outline: none;
margin-bottom: 15px;
background-color: inherit;
color:hsl(240, 6%, 50%);
}
button:hover {
color: hsl(14, 88%, 65%);
}
span {
position: absolute;
left: 0;
font-size: 17px;
}
.arrowimage {
float: right;
padding-top: 5px;
}
p {
margin-top: 0;
display: none;
line-height: 25px;
}
JS代码：
<script>
document.getElementById("arrowbtn1").onclick = arrow1;
document.getElementById("arrowbtn2").onclick = arrow2;
document.getElementById("arrowbtn3").onclick = arrow3;
document.getElementById("arrowbtn4").onclick = arrow4;
document.getElementById("arrowbtn5").onclick = arrow5;
var arrowstatus = 1;
function arrow1 () {
if (arrowstatus == 1) {
document.getElementById("p1").style.display = "block";
document.getElementById("span1").style.fontWeight = "bold";
document.getElementById("span1").style.color = "hsl(238, 29%, 16%)";
document.getElementById("arrowimage1").style.transform = "scaley(-1)";
document.getElementById("arrowimage1").style.marginTop = "5px";
document.getElementById("arrowbtn2").s = 0;
arrowstatus = 0;
} else if (arrowstatus == 0){
document.getElementById("p1").style.display = "none";
document.getElementById("span1").style.fontWeight = "normal";
document.getElementById("span1").style.color = "inherit";
document.getElementById("arrowimage1").style.transform = "scaley(1)";
document.getElementById("arrowimage1").style.marginTop = "0px";;
arrowstatus = 1;
}
}
function arrow2 () {
if (arrowstatus == 1) {
document.getElementById("p2").style.display = "block";
document.getElementById("span2").style.fontWeight = "bold";
document.getElementById("span2").style.color = "hsl(238, 29%, 16%)";
document.getElementById("arrowimage2").style.transform = "scaley(-1)";
document.getElementById("arrowimage2").style.marginTop = "5px";
arrowstatus = 0;
} else if (arrowstatus == 0){
document.getElementById("p2").style.display = "none";
document.getElementById("span2").style.fontWeight = "normal";
document.getElementById("span2").style.color = "inherit";
document.getElementById("arrowimage2").style.transform = "scaley(1)";
document.getElementById("arrowimage2").style.marginTop = "0px";;
arrowstatus = 1;
}
}
function arrow3 () {
if (arrowstatus == 1) {
document.getElementById("p3").style.display = "block";
document.getElementById("span3").style.fontWeight = "bold";
document.getElementById("span3").style.color = "hsl(238, 29%, 16%)";
document.getElementById("arrowimage3").style.transform = "scaley(-1)";
document.getElementById("arrowimage3").style.marginTop = "5px";
arrowstatus = 0;
} else if (arrowstatus == 0){
document.getElementById("p3").style.display = "none";
document.getElementById("span3").style.fontWeight = "normal";
document.getElementById("span3").style.color = "inherit";
document.getElementById("arrowimage3").style.transform = "scaley(1)";
document.getElementById("arrowimage3").style.marginTop = "0px";;
arrowstatus = 1;
}
}
function arrow4 () {
if (arrowstatus == 1) {
document.getElementById("p4").style.display = "block";
document.getElementById("span4").style.fontWeight = "bold";
document.getElementById("span4").style.color = "hsl(238, 29%, 16%)";
document.getElementById("arrowimage4").style.transform = "scaley(-1)";
document.getElementById("arrowimage4").style.marginTop = "5px";
arrowstatus = 0;
} else if (arrowstatus == 0){
document.getElementById("p4").style.display = "none";
document.getElementById("span4").style.fontWeight = "normal";
document.getElementById("span4").style.color = "inherit";
document.getElementById("arrowimage4").style.transform = "scaley(1)";
document.getElementById("arrowimage4").style.marginTop = "0px";;
arrowstatus = 1;
}
}
function arrow5 () {
if (arrowstatus == 1) {
document.getElementById("p5").style.display = "block";
document.getElementById("span5").style.fontWeight = "bold";
document.getElementById("span5").style.color = "hsl(238, 29%, 16%)";
document.getElementById("arrowimage5").style.transform = "scaley(-1)";
document.getElementById("arrowimage5").style.marginTop = "5px";
arrowstatus = 0;
} else if (arrowstatus == 0){
document.getElementById("p5").style.display = "none";
document.getElementById("span5").style.fontWeight = "normal";
document.getElementById("span5").style.color = "inherit";
document.getElementById("arrowimage5").style.transform = "scaley(1)";
document.getElementById("arrowimage5").style.marginTop = "0px";;
arrowstatus = 1;
}
}
</script>
答案 0 :(得分：2)
让 CSS 处理样式，让 javascript 负责添加和删除该类
//Find all button elements in an element with the id "faq" and iterate them
document.querySelectorAll('#faq button').forEach(item => {
//Add a on click event handler to each element
item.addEventListener('click', function(event) {
//Get parent element
let parent = this.parentNode;
//get current section with class="active"
let active = document.querySelector("#faq .active");
//Toggle active state class on parent
parent.classList.toggle("active");
//Remove the active class if not on clicked buttons parent.
if (active && parent != active) {
active.classList.remove("active");
}
});
});#faq {
list-style-type: none;
}
/*Hide anyting in inactive sections that are not buttons*/
#faq>:not(.active)> :not(button) {
display: none;
}
/*Style the active button span*/
#faq>.active button>span {
font-weight: bold;
color: hsl(238, 29%, 16%);
}
/*Style the active button image*/
#faq>.active button>img {
transform: scaleY(-1);
margin-top: 5px;
}<!-- H1 not a valid child of ul -->
<h1>FAQ</h1>
<ul id="faq">
<li>
<button type="button" id="arrowbtn1">
<span id="span1">How many team members can I invite?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage1" class="arrowimage">
</button>
<p id="p1">
You can invite up to 2 additional users on the<br> Free plan.There is no limit on team members for <br> the Premium plan.
</p>
</li>
<li>
<button type="button" id="arrowbtn2">
<span id="span2">What is the maximum file upload size?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage2" class="arrowimage">
</button>
<p id="p2">
No more than 2GB. All files in your account must<br> fit your allotted storage space.
</p>
</li>
<li>
<button type="button" id="arrowbtn3">
<span id="span3">How do I reset my password?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage3" class="arrowimage">
</button>
<p id="p3">
Click “Forgot password” from the login page or<br> “Change password” from your profile page.<br> A reset link will be emailed to you
</p>
</li>
<li>
<button type="button" id="arrowbtn4">
<span id="span4">Can I cancel my subscription?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage4" class="arrowimage">
</button>
<p id="p4">
Yes! Send us a message and we’ll process your<br> request no questions asked.
</p>
</li>
<li>
<button type="button" id="arrowbtn5">
<span id="span5">Do you provide additional support?</span>
<img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage5" class="arrowimage">
</button>
<p id="p5">
Chat and email support is available 24/7. Phone<br> lines are open during normal business hours.
</p>
</li>
</ul>