单击时仅有效一次
[英]On click only works once
问题描述
对于我的响应式（移动）汉堡菜单，我想在按下 class 时显示菜单。 但它只能工作一次（“点击”在控制台中只锁定一次，所以它不会在按下一次后注册点击）。 注意：我使用 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>
1 个解决方案
解决方案1
1 2022-01-16 17:13:52
我已经修好了。 问题是移动 nav-abr 在按钮顶部渲染了一个透明的 object，所以我实际上没有点击该按钮。 解决方案不是为按钮提供更高的 z-index。 谢谢您的帮助！ 注意安全！
链接点击只工作一次
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.