Question

我有这个按钮：

<button onclick="click_button1()"><a href="">Calculate SubGhz channel</a></button>

调用函数：

function click_button1(){
    document.getElementById(converters).click();
}

<button class="collapsible" id="converters">Converters</button>

此按钮折叠/扩展以下div：

<div class="content" id="contentConverters">
   <a name="1"></a>
   <button class="collapsible">Calculate SubGhz channel</button>
   <div class="content">
   <table>
        <tr>
            <td class="labels">Channel:</td>
            <td><input class="labels" type="number" id="page" Value="0"></td>
            <td><input type="button" onclick="CalculateSubGhzPage()" value="Calculate"></td>
        </tr>
    </table>
    <br>
   </div>
</div>

这个想法是，我单击button X，并且button X调用一个触发button Y的函数，并且button Y展开或折叠div。

到目前为止，我的编码工作正常，但是问题是，当我按button X时div只会折叠而不会扩展，但是如果我直接按button Y则双向都可以。

可折叠的Javacript


    var coll = document.getElementsByClassName("collapsible");
          var i;

          for (i = 0; i < coll.length; i++) {
             coll[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                   content.style.display = "none";
                } else {
                   content.style.display = "block";
                }
             });
          }

可运行的示例

<!doctype html>
<html>
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>GBCS Tools</title>

       <style>
          .collapsible {
             cursor: pointer; 
          }

          #converters {
             background-color:#57756f;
          }
          #flags {
             background-color:#57756f;
          }
            q
          .active,
          .collapsible:hover {
             background-color: #555;
          }
        #contentConverters  {
             display: none;
             overflow: hidden;
          }

          .content {
             display: none;
             overflow: hidden;
          }

    .navList {
      background-color: #874d59;
      list-style-type: none;
      height:50px;
      position:fixed;
      z-index: 100;
      /*keep it high*/
      float:right;
    }

    .navList li {
      float: right;
      margin-right:10%;
    }


    .navList a:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    .navList a[href="#tools"] {
      padding-top:15px; 
      color:    #c3b0aa;
      background-color: #874d59 ;
    }

    .navList > li {
      position: relative;
    }

    .navList > li > div {
      padding-righ:20%;
      padding-left:auto;
      visibility: hidden;
      position: relative;
      background-color: #8b787b;
      transition: .1s;
      opacity: 0;
    }

    .navList > li:hover > div {
      visibility: visible;
      opacity: 1;
    }

       </style>
    </head>

    <body>
        <ul class="navList">
          <li><a href="#tools"><b>Tools</b></a>
            <div>
              <button onclick="click_button1()"><a href="">Calculate SubGhz channel</a></button>
            </div>
          </li>  
        </ul>


    <div class="container">
    <button class="collapsible" id="converters">Converters</button>
    <div class="content" id="contentConverters">
       <button class="collapsible">Calculate SubGhz channel</button>
       <div class="content">
        <br>
  <p>Someting</p>
        <br>
       </div>
    </div>
</body>
</html>

<script>   
    function click_button1(){
        document.getElementById("converters").click();
    }

      var coll = document.getElementsByClassName("collapsible");
      var i;

      for (i = 0; i < coll.length; i++) {
         coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
               content.style.display = "none";
            } else {
               content.style.display = "block";
            }
         });
      }

   </script>

Answer 1

您在document.getElementById上有错字

检查以下一般示例：

function click_button1() { document.getElementById('converters').click(); }

<button onclick="click_button1()"><a href="#">Calculate SubGhz channel</a></button>

<button class="collapsible" id="converters" onclick="alert('click!');">Converters</button>

Answer 2

没关系，我想通了，谢谢大家的帮助:)：

function click_button1(){
        document.getElementById("converters").click();
        document.getElementById("SubGhz").click();

    }

<button class="collapsible" id="converters">Converters</button>
<div class="content" id="contentConverters">
   <button class="collapsible" id="SubGhz">Calculate SubGhz channel</button>
   <div class="content">
    <br>
    <table>
    </table>
    <br>
   </div>

为什么此按钮单击另一个按钮后不起作用

2 个答案: