单击时仅有效一次答案

【问题标题】：On click only works once单击时仅有效一次
【发布时间】：2022-01-17 04:02:05
【问题描述】：

对于我的响应式（移动）汉堡菜单，我想在按下课程时显示菜单。但它只能工作一次（“点击”在控制台中只被锁定一次，所以它不会在按下一次后注册点击）。注意：我使用 PHP 作为侧面和菜单 html。

我的错误是什么？谢谢你的建议！

var btn = document.querySelector(".toggle-btn");
var navbar = document.querySelector(".menue");
btn.addEventListener('click', () => {
  console.log('click');
  navbar.classList.toggle("active");
})

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="nav-bar">
  <nav>
    <div class="logo">
      <a href="../../index.php"><img src="../png/lg_nord_logo_navbar.png" alt=""></a>
    </div>
    <a href="#" class="toggle-btn">
      <span class="bar">Bar 1</span>
      <span class="bar">Bar 2</span>
      <span class="bar">Bar 3</span>
    </a>
    <div class="menue">
      <ul>
        <li><a href="#">Disziplinen</a>
          <ul>
            <li><a href="../disziplinen/30_m_startblock.php">30 meter startblock</a></li>
            <li><a href="../disziplinen/30_m_fliegend.php">30 meter fliegend</a></li>
            <li><a href="../disziplinen/60m.php">60 meter</a></li>
            <li><a href="../disziplinen/10er_hopserlauf.php">10er Hopserlauf</a></li>
            <li><a href="../disziplinen/Klappmesser.php">Klappmesser</a></li>
            <li><a href="../disziplinen/Klimmzuege.php">Klimmzüge</a></li>
            <li><a href="../disziplinen/liegestuetze.php">Liegestütze</a></li>
            <li><a href="../disziplinen/standweitsprung.php">Standweitsprung</a></li>
          </ul>
        </li>
        <li><a href="#">Daten hinzufügen</a>
          <ul>
            <li><a href="../addData/30_m_startblock.php">30 meter startblock</a></li>
            <li><a href="../addData/30_m_fliegend.php">30 meter fliegend</a></li>
            <li><a href="../addData/60m.php">60 meter</a></li>
            <li><a href="../addData/10er_hopserlauf.php">10er Hopserlauf</a></li>
            <li><a href="../addData/Klappmesser.php">Klappmesser</a></li>
            <li><a href="../addData/Klimmzuege.php">Klimmzüge</a></li>
            <li><a href="../addData/liegestuetze.php">Liegestütze</a></li>
            <li><a href="../addData/standweitsprung.php">Standweitsprung</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="material-icons">support_agent</i>Athleten (beta)</a>
          <ul>
            <li><a href="../athlet_search/index.php?name=tom">Tom-Luca</a></li>
            <li><a href="../athlet_search/index.php?name=marc">Marc          </a></li>
            <li><a href="../athlet_search/index.php?name=leo">Leo          </a></li>
            <li><a href="../athlet_search/index.php?name=lukas">Lukas</a></li>
            <li><a href="../athlet_search/index.php?name=vincent">Vincent</a></li>
            <li><a href="../athlet_search/index.php?name=damien">Damien</a></li>
            <li><a href="../athlet_search/index.php?name=karsten">Karsten</a></li>
          </ul>
        </li>
        <li><a href="../../settings/"><i class="material-icons">admin_panel_settings</i> Einstellungen</a></li>
        <li><a class="state" href="login.php">Login</a></li>
        <li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i>  Logout</a></li>
      </ul>
    </div>
  </nav>
</div>
```

我的 PHP 代码：

<?php
session_start();
if(!isset($_SESSION["username"])){
  header("Location: ../index.php");
  exit;
}
require("../rank_manager.php");
if(getRank($_SESSION["username"]) == USER){
  header("Location: ../errors/error.php?code=101&name=not_enought_permissions&type=website");
    exit;
}
if(isBanned($_SESSION["username"])){
  header("Location: logout.php");
  exit;
}


?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#34495e">
    <title>Daten hinzufügen</title>
    <link rel="stylesheet" href="./css/style.theme.css">
    <script src="https://kit.fontawesome.com/c54c107c6a.js" crossorigin="anonymous"></script>
    <script type="text/javascript "src="../../theme/themeManager.js" defer></script>
    <script type="text/javascript "src="navbar_menu.js" defer></script>
  </head>
  <body class="light">
    <div class="themeChange">
      <button id="changeTheme"><i class="material-icons">dark_mode</i></button>
    </div>
    <div class="preloader">
        <img src="../png/preloader-final.gif" alt="">
    </div>

    
    <?php
        include("../navbar/navbar.html");
    ?>

    <div class="data">
      <form action="standweitsprung.php" method="post">

          <h1>Daten eintragen</h1>
          <br><br>
        
          <input type="text" name="period"  placeholder="Zeitraum">
          
          <input name="tom" id="tom_input"  type="number" step="0.01" placeholder="Tom">

          <input name="marc" id="marc_input"  type="number" step="0.01" placeholder="Marc">

          <input  name="leo" id="leo_input"  type="number" step="0.01" placeholder="Leo">

          <input name="lukas" id="lukas_input"  type="number" step="0.01" placeholder="Lukas">

          <input name="vincent" id="vincent_input"  type="number" step="0.01" placeholder="Vincent">

          <input name="damien" id="damien_input"  type="number" step="0.01" placeholder="Damien">

          <input name="karsten" id="karsten_input"  type="number" step="0.01" placeholder="Karsten">

          <button type="submit" name="submit">Daten absenden</button>
      </form>
    </div>

    <?php
    if(isset($_POST["submit"])){
        $period = $_POST["period"];
        $tom = $_POST["tom"];
        $marc = $_POST["marc"];
        $leo = $_POST["leo"];
        $lukas = $_POST["lukas"];
        $vincent = $_POST["vincent"];
        $damien = $_POST["damien"];
        $karsten = $_POST["karsten"];

        if($tom == "") {
          $tom = null;
        }
        if($lukas == "") {
          $lukas = null;
        }
        if($leo == "") {
          $leo = null;
        }
        if($marc == "") {
          $marc = null;
        }
        if($vincent == "") {
          $vincent = null;
        }
        if($damien == "") {
          $damien = null;
        }
        if($karsten == "") {
          $karsten = null;
        }

        $content = array(
          "period" => $period,
          "tom" => $tom,
          "marc" => $marc,
          "leo" => $leo,
          "lukas" => $lukas,
          "vincent" => $vincent,
          "damien" => $damien,
          "karsten" => $karsten,
        );

        if(filesize("../data/standweitsprung.json") == 0) {
          $first_record = array($content);
          $data_to_save = $first_record;
        } else {
          $old_records = json_decode(file_get_contents("../data/standweitsprung.json"));
          array_push($old_records, $content);

          $data_to_save = $old_records;
        }
        if(!(file_put_contents("../data/standweitsprung.json", json_encode($data_to_save, JSON_PRETTY_PRINT), LOCK_EX))) {
          $error = "Error storing content";
        } else {
          $success = "Daten gespeichert";
        }
    }
     ?>

    <div class="turn-device">
        <img src="../png/rotate-device-light.png" alt="">
    </div>

    <script src="../javascript/preloader.js"></script>

  </body>
</html>

【问题讨论】：

我在 span 中添加了一些文本，代码按预期工作
我看不出 PHP 代码在这里有什么意义。当您遇到客户端代码（如 JS）问题时，您应该查看发送到浏览器的生成代码（右键单击页面并“查看源代码”）。
addEventListener() 对我来说似乎工作正常，toggle() 工作正常。 'click' 还会记录我每次点击，而不仅仅是一次。

标签： javascript php html css mobile-website

【解决方案1】：

我已经修好了。问题是移动导航栏在按钮顶部渲染了一个透明对象，所以我实际上从未点击过该按钮。解决方案是给按钮一个更高的 z-index。

【讨论】：