切换按钮在 Javascript 中不起作用
[英]Toggle button is not working in Javascript
问题描述
我创建了一个导航栏，其中包含切换按钮。我面临的问题是在响应视图中，单击切换按钮后，切换按钮隐藏并显示导航栏。 但是在隐藏切换按钮后，我想显示另一个按钮，单击导航栏会隐藏该按钮。 我不明白我做错了什么，我该怎么办？
这是代码是：
let menuBar=document.querySelector('#menu-bar'); navBar=document.querySelector('.navbar'); menuBar.onclick=()=>{ menuBar.classList.add('hide'); // menuBar.classList.add('fa-times'); navBar.classList.add('show'); times(); } let icon="fas fa-times"; function times(){ if(navBar.classList.contains('show')){ menuBar.innerHTML=`<i class="${icon}"></i>`; } }
*{ margin: 0; padding: 0; box-sizing: border-box; } html{ font-size: 62.5%; } header{ top: 0; left: 0; position: fixed; background: #fff; box-shadow:5px 5px 7px rgba(0,0,0,0.4); width: 100%; padding: 1.5rem 10%; z-index: 1000; display: flex; justify-content: space-between; align-items: center; } header h1{ font-size: 30px; color: rgb(225, 156, 65); text-transform: capitalize; } header.navbar ul{ display: flex; align-items: center; justify-content: center; list-style: none; } header.navbar ul li{ margin-right: 3rem; } header.navbar ul li a{ text-decoration: none; font-size: 1.3rem; color: #568aef; text-transform: capitalize; } #menu-bar{ font-size: 20px; cursor: pointer; display:none; } /*media query*/ @media (max-width:768px){ html{ font-size: 55%; } header #menu-bar{ display: block; } header #menu-bar.hide{ opacity: 0; pointer-events: none; } header.navbar{ position: fixed; top: 8rem; left: 0; background: #568aef; width: 100%; opacity: 0; } header.navbar.show{ opacity: 1; } header.navbar ul{ flex-flow: column; padding: 2rem; } header.navbar ul li{ width: 100%; margin: 1.5rem; } header.navbar ul li a{ color: #fff; display: block; padding-left: 2rem; font-size: 2rem; border-left: 0.3rem solid #fff; }.fa-times{ transform: rotate(180deg); opacity: 1; font-size: 20px; color: black; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Nav4</title> <.--fontawsome cdn link--> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min:css"> <link rel="stylesheet" href="css/nav4.css"> </head> <body> <header> <h1>ninja codes</h1> <div id="menu-bar" class="fas fa-hamburger"></div> <nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> <li><a href="#">login</a></li> </ul> </nav> </header> <.--jquery cdn link--> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!--custom js file link--> <script src="nav4.js"></script> </body> </html>
1 个解决方案
解决方案1
2 2021-06-15 15:36:12
一些注意事项：
- 它以前不起作用，因为您在将
hideclass 添加到menuBar后没有删除它 - 您正在将图标嵌套在图标中 - 不推荐
- 您正在执行不必要的检查 - 您应该只使用
classList.toggle()代替
这是工作代码：
let menuBar = document.querySelector('#menu-bar'); navBar = document.querySelector('.navbar'); menuBar.onclick = () => { navBar.classList.toggle('hide'); navBar.classList.toggle('show'); times(); } let icon = "fas fa-times"; function times() { menuBar.classList.toggle('fa-times'); }
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } header { top: 0; left: 0; position: fixed; background: #fff; box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4); width: 100%; padding: 1.5rem 10%; z-index: 1000; display: flex; justify-content: space-between; align-items: center; } header h1 { font-size: 30px; color: rgb(225, 156, 65); text-transform: capitalize; } header.navbar ul { display: flex; align-items: center; justify-content: center; list-style: none; } header.navbar ul li { margin-right: 3rem; } header.navbar ul li a { text-decoration: none; font-size: 1.3rem; color: #568aef; text-transform: capitalize; } #menu-bar { font-size: 20px; cursor: pointer; display: none; } /*media query*/ @media (max-width:768px) { html { font-size: 55%; } header #menu-bar { display: block; } header #menu-bar.hide { opacity: 0; pointer-events: none; } header.navbar { position: fixed; top: 8rem; left: 0; background: #568aef; width: 100%; opacity: 0; } header.navbar.show { opacity: 1; } header.navbar ul { flex-flow: column; padding: 2rem; } header.navbar ul li { width: 100%; margin: 1.5rem; } header.navbar ul li a { color: #fff; display: block; padding-left: 2rem; font-size: 2rem; border-left: 0.3rem solid #fff; }.fa-times { transform: rotate(180deg); opacity: 1; font-size: 20px; color: black; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Nav4</title> <.--fontawsome cdn link--> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min:css"> <link rel="stylesheet" href="css/nav4.css"> </head> <body> <header> <h1>ninja codes</h1> <div id="menu-bar" class="fas fa-hamburger"></div> <nav class="navbar hide"> <ul> <li><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> <li><a href="#">login</a></li> </ul> </nav> </header> <.--jquery cdn link--> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!--custom js file link--> <script src="nav4.js"></script> </body> </html>
Javascript 按钮切换在第一次点击时不起作用，只有第二次点击或更多
[英]Javascript button toggle not working on first click, only second click or more
单击时javascript切换不起作用，但将鼠标悬停在按钮上时css起作用
[英]javascript toggle not working whenclicked but css works when a button is hovered over
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript：切换按钮无法正常工作
Javascript切换按钮在iPhone上不起作用
切换按钮不起作用 - 使用 Javascript function
JavaScript 切换按钮不适用于 HTML 表中的按钮
切换按钮 JavaScript 代码在 React JS 中不起作用
在 2 个布局之间切换的按钮不适用于 javascript
JavaScript：切换按钮组无法正常工作
javascript 中的按钮显示/隐藏 div，切换不起作用
Javascript 按钮切换在第一次点击时不起作用，只有第二次点击或更多
单击时javascript切换不起作用，但将鼠标悬停在按钮上时css起作用
相关标签