JavaScript隐藏/可见脚本在第二次单击后不会隐藏

JavaScript hide/Visible script doesnt hide after 2nd click

本文关键字：隐藏单击第二次脚本 JavaScript 更新时间：2023-09-26

我的脚本有问题，当我点击隐藏div时，它不起作用。但对于使div可见，它的工作非常完美。

你能解释一下并帮我吗？

function visibilite(id) {
        var divs = document.getElementsByTagName('div');
        for(var no=0;no<divs.length;no++){
            if(divs[ no].className=='divs bouton' || divs[ no].className=='divs'){ // Target div which called "divs" OR called "divs bouton"
                divs[ no].style.display = "none"; // hide them all
            }
        }   
        document.getElementById(id).style.display = "block"; // visible
    }

HTML代码：

<head>
    <link href="ress/css/stylesheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/baseScript.js"></script>
    <style type="text/css">
    /*<![CDATA[*/
     .divs {display:none;padding:5px;margin:10px;}
    /*]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function visibilite(id) {
        var divs = document.getElementsByTagName('div');
        for(var no=0;no<divs.length;no++){
            if(divs[ no].className=='divs bouton' || divs[ no].className=='divs'){ // Target div which called "divs" OR called "divs bouton"
                divs[ no].style.display = "none"; // hide them all
            }
        }   
        document.getElementById(id).style.display = "block"; // visible
    }
    //]]>
    </script>
  </head>


<body>
    <div style="width:250px;margin:auto;" class="txtlinks" id ="headontainer">
            <div class="col marginR">
                <a style="float:left; margin-right:10px;" href ="#">Installation Kit</a><a href ="#">FAQs</a><br />
            </div>
    </div>

    <div style="width:700px;margin-left:auto;margin-right:auto;" id ="maincontainer">
            <div style="padding-bottom:75px;" onmouseover="this.style.border='1px solid blue'" onmouseout="this.style.border='0px'" id="work_1" >
                <a style="text-transform:none;" href="javascript:visibilite('opt1');">
                <div>
                  <span class="blctxt blueblc">Getting to know Office 365</span>
                  <br />
                  <span style="color: rgb(80, 81, 80); font-family: 'segoe ui', arial, tahoma; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">
                  Check out see some of the ways Office 365 can help people get things done,
                  better, together</span>.
                </div>
                </a>
                <div id="opt1" class="divs bouton">
                    <br />
                    <br />                      
                    <a style="text-decoration: none; color:white;" href="http://aka.ms/o365booklet" target="_blank">Download PDF</a>
                </div>
            </div>

非常感谢。

您可以简单地编写以下内容：

function visibilite() {
        var divs = document.getElementsByClassName('divs');
        var bouton = document.getElementsByClassName('bouton');
        if(divs.style.display == 'hidden' || bouton.style.display == 'hidden')
         {
        bouton.style.display = "block";
        divs.style.display = "block"; // visible
        }
        else{
bouton.style.display = "hidden";
        divs.style.display = "hidden"; 
        }
    }