如何将我的点击 JS 转换为点击事件侦听器?

这是我的代码笔，显示了onclick和javascript代码。我正在尝试将JS转换为addEventListener，但我无法让它工作

https://codepen.io/designextras/pen/NWxaowR

const menuIcon = document.querySelector('#menu-bars')
const sideMenu = document.querySelector('#nav-menu')

function showMenu() {
if(true) {
sideMenu.classList.add('active')
}
}
function hideMenu() {
if(true) {
sideMenu.classList.remove('active')
}
}

.HTML

<div id="navbar">
<a href="#" id="menu-bars" onclick="showMenu()">
<i class="fas fa-bars"></i>
</a>
</div>
<nav id="nav-menu">
<ul class="nav-menu-items">
<div id="navbar-toggle">
<a href="#" id="menu-bars" onclick="hideMenu()">
<i class="fas fa-bars nav-icon"></i> 
</a>

删除onClick并包含类似addEventListener，

menuIcon.addEventListener('click', showMenu);
hideMenuIcon.addEventListener('click', hideMenu);

id应该是唯一的，但您在两个地方使用它id="menu-bars"您可以修改，如下所示。

我已经包含了用于关闭一个和选定元素的新id，例如，

const hideMenuIcon = document.querySelector('#hide-menu-bars')

https://codepen.io/Maniraj_Murugan/pen/ZEQXwvv

和片段如下，

const menuIcon = document.querySelector('#menu-bars')
const hideMenuIcon = document.querySelector('#hide-menu-bars')
const sideMenu = document.querySelector('#nav-menu')

function showMenu() {
if(true) {
sideMenu.classList.add('active')
}
}
function hideMenu() {
if(true) {
sideMenu.classList.remove('active')
}
} 
menuIcon.addEventListener('click', showMenu);
hideMenuIcon.addEventListener('click', hideMenu);

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #212121;
height: 100px;
display: flex;
justify-content: start;
align-items: center;
}
#menu-bars {
margin-left: 2rem;
font-size: 2rem;
color: #fff;
} 
#hide-menu-bars {
margin-left: 2rem;
font-size: 2rem;
color: #fff;
} 
#nav-menu {
background: #212121;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 450ms;
}
#nav-menu.active {
left: 0;
transition: 450ms;
}
.nav-text {
display: flex;
justify-content: start;
list-style: none;
height: 50px;
padding: 1rem;
}

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 
</head>
<div id="navbar">
<a href="#" id="menu-bars">
<i class="fas fa-bars"></i>
</a>
</div>

<nav id="nav-menu">
<ul class="nav-menu-items">
<div id="navbar-toggle">
<a href="#" id="hide-menu-bars">
<i class="fas fa-bars nav-icon"></i> 
</a>

你只需要找到id并向其添加事件侦听器。像这样：

const menuIcon = document.querySelector('#menu-bars')
const sideMenu = document.querySelector('#nav-menu')

menuIcon.addEventListener('click', function(){
sideMenu.classList.add('active')
})
sideMenu.addEventListener('click', function(){
sideMenu.classList.remove('active')
})

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #212121;
height: 100px;
display: flex;
justify-content: start;
align-items: center;
}
#menu-bars {
margin-left: 2rem;
font-size: 2rem;
color: #fff;
} 
#nav-menu {
background: #212121;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 450ms;
}
#nav-menu.active {
left: 0;
transition: 450ms;
}
.nav-text {
display: flex;
justify-content: start;
list-style: none;
height: 50px;
padding: 1rem;
}

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 
</head>
<div id="navbar">
<a href="#" id="menu-bars">
<i class="fas fa-bars"></i>
</a>
</div>

<nav id="nav-menu">
<ul class="nav-menu-items">
<div id="navbar-toggle">
<a href="#" id="menu-bars">
<i class="fas fa-bars nav-icon"></i> 
</a>

正如评论，

打开菜单很简单。关闭它是棘手的部分。您将有多个菜单项。因此，您必须使用querySelectorAll，然后循环所有元素并单独添加侦听器。

想法

您将有多个菜单项。因此，您不能使用ids来获取。为此，您可以使用以下模式：#nav-menu a
现在，取消它们意味着您将获得一个NodeList而不是HTMLElement。
因此，您必须遍历列表并将侦听器分配给独立元素。

下面是一个示例：

const menuIcon = document.querySelector('#navbar a');
const menuItems = document.querySelector('#nav-menu a');
const sideMenu = document.querySelector('#nav-menu')
menuIcon.addEventListener('click', showMenu);
menuItems.addEventListener('click', hideMenu);
function showMenu() {
if(true) {
sideMenu.classList.add('active')
}
}
function hideMenu() {
if(true) {
sideMenu.classList.remove('active')
}
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #212121;
height: 100px;
display: flex;
justify-content: start;
align-items: center;
}
#menu-bars {
margin-left: 2rem;
font-size: 2rem;
color: #fff;
} 
#nav-menu {
background: #212121;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 450ms;
}
#nav-menu.active {
left: 0;
transition: 450ms;
}
.nav-text {
display: flex;
justify-content: start;
list-style: none;
height: 50px;
padding: 1rem;
}

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 
</head>
<div id="navbar">
<a href="#" id="menu-bars">
<i class="fas fa-bars"></i>
</a>
</div>

<nav id="nav-menu">
<ul class="nav-menu-items">
<div id="navbar-toggle">
<a href="#">
<i class="fas fa-bars nav-icon"></i> 
</a>

想法

相关内容

最新更新

热门标签：