Javascript 单击其中一个按钮时关闭其他按钮
我只是找了一下这个坚果，什么也没找到。 所以我有5个按钮，当你点击它们时，它会显示一个段落，如果你再次点击，它会隐藏该段落。但我想知道，我如何制作按钮，比如当你打开一个按钮，点击另一个按钮时，它会关闭其余的按钮。我的意思是，当其中一个按钮被点击和打开时，我想隐藏其他按钮。 如果你能告诉我一个更好的方法让代码变小，我将不胜感激。 这是整个页面的图像： 你可以看到右边的列表，所以我希望它就像我点击一个箭头图标时，另一个将关闭并隐藏内容。 这是按钮代码之一HTML代码的示例：Javascript 单击其中一个按钮时关闭其他按钮,javascript,html,css,button,Javascript,Html,Css,Button,我只是找了一下这个坚果，什么也没找到。 所以我有5个按钮，当你点击它们时，它会显示一个段落，如果你再次点击，它会隐藏该段落。但我想知道，我如何制作按钮，比如当你打开一个按钮，点击另一个按钮时，它会关闭其余的按钮。我的意思是，当其中一个按钮被点击和打开时，我想隐藏其他按钮。 如果你能告诉我一个更好的方法让代码变小，我将不胜感激。 这是整个页面的图像： 你可以看到右边的列表，所以我希望它就像我点击一个箭头图标时，另一个将关闭并隐藏内容。 这是按钮代码之一HTML代码的示例： <u
<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>
<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>
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；
函数箭头1（）{
如果（箭头状态==1）{
document.getElementById（“p1”）.style.display=“block”；
document.getElementById（“span1”）.style.fontwweight=“bold”；
document.getElementById（“span1”）.style.color=“hsl（238,29%，16%）”；
document.getElementById（“arrowimage1”）.style.transform=“scaley（-1）”；
document.getElementById（“箭头图像1”）.style.marginTop=“5px”；
document.getElementById（“arrowbtn2”）.s=0；
箭头状态=0；
}else if（箭头状态==0）{
document.getElementById（“p1”）.style.display=“无”；
document.getElementById（“span1”）.style.fontwweight=“正常”；
document.getElementById（“span1”）.style.color=“继承”；
document.getElementById（“arrowimage1”）.style.transform=“scaley（1）”；
document.getElementById（“arrowimage1”）.style.marginTop=“0px”；；
箭头状态=1；
}
}
函数2（）{
如果（箭头状态==1）{
document.getElementById（“p2”）.style.display=“block”；
document.getElementById（“span2”）.style.fontwweight=“bold”；
document.getElementById（“span2”）.style.color=“hsl（238,29%，16%）”；
document.getElementById（“arrowimage2”）.style.transform=“scaley（-1）”；
document.getElementById（“箭头图像2”）.style.marginTop=“5px”；
箭头状态=0；
}else if（箭头状态==0）{
document.getElementById（“p2”）.style.display=“无”；
document.getElementById（“span2”）.style.fontwweight=“正常”；
document.getElementById（“span2”）.style.color=“继承”；
document.getElementById（“arrowimage2”）.style.transform=“scaley（1）”；
document.getElementById（“arrowimage2”）.style.marginTop=“0px”；；
箭头状态=1；
}
}
函数3（）{
如果（箭头状态==1）{
document.getElementById（“p3”）.style.display=“block”；
document.getElementById（“span3”）.style.fontwweight=“bold”；
document.getElementById（“span3”）.style.color=“hsl（238,29%，16%）”；
document.getElementById（“arrowimage3”）.style.transform=“scaley（-1）”；
document.getElementById（“箭头图像3”）.style.marginTop=“5px”；
箭头状态=0；
}else if（箭头状态==0）{
document.getElementById（“p3”）.style.display=“无”；
document.getElementById（“span3”）.style.fontwweight=“正常”；
document.getElementById（“span3”）.style.color=“继承”；
document.getElementById（“arrowimage3”）.style.transform=“scaley（1）”；
document.getElementById（“arrowimage3”）.style.marginTop=“0px”；；
箭头状态=1；
}
}
函数箭头4（）{
如果（箭头状态==1）{
document.getElementById（“p4”）.style.display=“block”；
document.getElementById（“span4”）.style.fontwweight=“bold”；
document.getElementById（“span4”）.style.color=“hsl（238,29%，16%）”；
document.getElementById（“arrowimage4”）.style.transform=“scaley（-1）”；
document.getElementById（“箭头图像4”）.style.marginTop=“5px”；
箭头状态=0；
}else if（箭头状态==0）{
document.getElementById（“p4”）.style.display=“无”；
document.getElementById（“span4”）.style.fontwweight=“正常”；
document.getElementById（“span4”）.style.color=“继承”；
document.getElementById（“arrowimage4”）.style.transform=“scaley（1）”；
document.getElementById（“arrowimage4”）.style.marginTop=“0px”；；
箭头状态=1；
}
}
函数箭头5（）{
如果（箭头状态==1）{
document.getElementById（“p5”）.style.display=“block”；
document.getElementById（“span5”）.style.fontwweight=“bold”；
document.getElementById（“span5”）.style.color=“hsl（238,29%，16%）”；
document.getElementById（“arrowimage5”）.style.transform=“scaley（-1）”；
document.getElementById（“arrowimage5”）.style.marginTop=“5px”；
箭头状态=0；
}else if（箭头状态==0）{
document.getElementById（“p5”）.style.display=“无”；
document.getElementById（“span5”）.style.fontwweight=“正常”；
document.getElementById（“span5”）.style.color=“继承”；
document.getElementById（“arrowimage5”）.style.transform=“scaley（1）”；
docum
<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>