javascript - 隐藏按钮内容的命令

Question

我刚刚搜索了这个，但我没有找到任何东西。所以，我有 5 个按钮，当你点击它们时，它会显示一个段落。如果您再次单击它会隐藏它。我想知道如何制作像这样的按钮：当您单击一个按钮时，它将显示该按钮的内容并隐藏另一个按钮的内容（如果它们正在显示）。

如果可以的话，用我的代码告诉我答案，而不是另一个复杂的代码。如果您告诉我一个更好的方法来总结这些代码，我将不胜感激。

这是整个页面的图像：https ://uupload.ir/files/0xwx_desktop-design.jpg 。您可以在右侧看到列表。我希望它就像我单击一个箭头图标时其他内容将隐藏一样。这是按钮代码之一的示例：

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;
    }
}

  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;
    
}

   <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>

标签： javascripthtmlcssbutton

Answer 1

一个快速而肮脏的解决方法是将它们全部关闭，然后打开人们点击的那个。一些伪代码将是：

function Closeall() 
{
    //closes them all
}

function ClickedButton1() 
{
    Closeall()
    //show data for this button
}
function ClickedButton2() 
{
    Closeall()
    //show data for the second button
}

一些不脏的代码是遍历数组