如何在我的 <h2> 标签上设置 onClick 事件，单击该事件将显示后续列表项？答案

【问题标题】：How do I set an onClick event on my <h2> tag which when clicked will show the subsequent list items?如何在我的 <h2> 标签上设置 onClick 事件，单击该事件将显示后续列表项？
【发布时间】：2021-06-14 14:23:07
【问题描述】：

我是 Web 开发的新手。我正在为我的 h2 元素注册一个 onClick 事件，单击该元素时将显示以下数据列表。如果单击任何地方，它应该隐藏列表。我的html代码如下：

<html lang="en" dir="ltr">
   <head>
      <title>New page</title>
      <link rel="stylesheet" href="styles.css">
      <script src="frontend.js"></script>
   </head>

   <body>
      <h1>Hello</h1>

      
        <h2>Disclaimer</h2>
        <div class="dropdown-content">
          <nav>
             <ol>
               <li>ABCDEF<br></li>
               <li>GHIJKL<br></li>
               <li>MNOPQRST<br></li>
            
             </ol>
          </nav>
        </div>

   </body>
</html>

当文本Disclaimer被按下一次时，它才会显示列表。再次按下时，它应该被隐藏。我该怎么做？

【问题讨论】：

你可以这样做js onclick hide/show answer

标签： javascript html css

【解决方案1】：

在免责声明 H2 中添加 onClick 事件。
接下来，设置 display:none 为您的列表加载时，点击时将切换为阻止。
最后，定义处理onClick事件的函数。

演示：https://jsbin.com/cazamiwifu/edit?html,output

<html lang="en" dir="ltr">
       <head>
          <title>New page</title>
          <link rel="stylesheet" href="styles.css">
          <script src="frontend.js"></script>
       </head>
    
       <body>
          <h1>Hello</h1>
    
          
            <h2 onclick="toggle()">Disclaimer</h2>
            <div class="dropdown-content" id="myDIV" style="display:none;">
              <nav>
                 <ol>
                   <li>ABCDEF<br></li>
                   <li>GHIJKL<br></li>
                   <li>MNOPQRST<br></li>
                
                 </ol>
              </nav>
            </div>
    <script>
      function toggle() {
        var x = document.getElementById("myDIV");
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }
    </script>
       </body>
    </html>

【讨论】：

奇怪了，我的frontend.js文件里写了代码，还是不行。
好吧，我的错，我不小心将我的文件命名为 frontend,js 而不是 frontend.js。感谢您的解决方案。

【解决方案2】：

像这样：

<script>
    document.onclick= function(event) {
      if(event.target == document.getElementById("target")){
          if(document.getElementById("nav").style.display == "block"){
              document.getElementById("nav").style.display ="none";
          }else {
              document.getElementById("nav").style.display ="block";
          }

      }else{
          document.getElementById("nav").style.display ="none";
        }
    }
</script>

【讨论】：