javascript - JavaScript 上下箭头菜单(仅限 Javascript)
问题描述
Javascript 向上和向下箭头菜单
在这里我发布了我的代码,我想为菜单创建一些javascript箭头,这是功能需要向上和向下,所以我试图弄清楚它只有在jquery中我到处搜索,那里有很多令人困惑的代码。但我只需要一个简单而纯粹的 javascript 代码。请愿意帮助我的人。
var menuup = document.getElementsByClassName("btn-down");
var menudwn = document.getElementsByClassName('btn-open');
nav {
position: relative;
padding: 45px 0px 0px 180px;
width: 1rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav>ul>li {
float: left;
background: blue;
}
nav ul::after {
content: '';
display: block;
clear: both;
}
nav ul li:hover>ul {
display: block;
}
nav ul li a {
display: inline-block;
color: #fff;
padding: 0.9rem 1rem;
text-decoration: none;
width: 120px;
}
nav ul li a:hover {
background-color: #339999;
}
.btn-open:after {
font-family: "FontAwesome";
content: "\f0de";
color: #fff;
font-size: 22px;
}
.btn-down:after {
font-family: "FontAwesome";
content: "\f0dd";
color: #fff;
font-size: 22px;
position: relative;
left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li><a href="#" class="btn-down">About us</a></li>
</ul>
</nav>
解决方案
这是你想要的吗?
var anchors = Array.from(document.querySelectorAll('a'));
anchors.map(anchor => {
if(anchor.classList.contains('btn-open') || anchor.classList.contains('btn-down')) {
anchor.addEventListener('click', () => {
if(anchor.classList.contains('btn-open')) {
anchor.classList.remove('btn-open');
anchor.classList.add('btn-down');
} else {
anchor.classList.add('btn-open');
anchor.classList.remove('btn-down');
}
});
}
});
nav {
position: relative;
padding: 45px 0px 0px 180px;
width: 1rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav>ul>li {
float: left;
background: blue;
}
nav ul::after {
content: '';
display: block;
clear: both;
}
nav ul li:hover>ul {
display: block;
}
nav ul li a {
display: inline-block;
color: #fff;
padding: 0.9rem 1rem;
text-decoration: none;
width: 120px;
}
nav ul li a:hover {
background-color: #339999;
}
.btn-open:after {
font-family: "FontAwesome";
content: "\f0de";
color: #fff;
font-size: 22px;
position: relative;
left: 10px;
top: 8px;
}
.btn-down:after {
font-family: "FontAwesome";
content: "\f0dd";
color: #fff;
font-size: 22px;
position: relative;
left: 10px;
top: -2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<ul>
<li><a href="#" class="btn-down">About us</a></li>
<li><a href="#" class="btn-down">Products</a></li>
</ul>
</nav>
推荐阅读
- spring - 无法解析导入的 org.springframework - Java(268435846)
- rest - woocommerce rest api中的产品搜索
- firebase - 如何为 Firestore 数据库调用 onwrite 事件侦听器函数?
- oop - 为什么“防止变化”意味着依赖的方向?
- html - 在 R 中格式化 Html 表 - 使用 Css
- python - 程序在将字典传递给函数参数时显示 TypeError
- oracle - -2147467259/未找到 Oracle 客户端和网络组件
- excel - 如何引用单元格“A(x.Value)”,其中 x 是一个从 1 到“A(x.Value)”= NULL 的整数
- node.js - 无法让 Next.js 使用自定义主机名
- mimekit - 需要将加密算法更改为 AES-256