javascript - 单击按钮时如何使ul按钮文本淡入淡出?
问题描述
快速提问,如何使用 Javascript 使我的 Ul 按钮缓慢出现(单击菜单按钮时)。这是我到目前为止所拥有的:
基本上,当调用菜单扩展导航功能时,我希望 li 标签慢慢出现/消失。我该怎么办?这只是我脚本的一个片段,因为它很多。
谢谢!
setup();
function setup() {
document.getElementById("extend-nav-container").style.display = "none";
}
function expandNav() {
if (document.getElementsByTagName("body")[0].style.overflow === "hidden") {
document.getElementById("extend-nav").style.height = "0px";
document.getElementsByTagName("body")[0].style.overflow = "";
document.getElementById("extend-nav-container").style.display = "none";
} else {
document.getElementById("extend-nav").style.height = "100vh";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
document.getElementById("extend-nav-container").style.display = "";
document.getElementById('fadeout').style.opacity = '0';
}
}
function myFunction(x) {
document.getElementById("extend-nav").style.height = "0px";
document.getElementsByTagName("body")[0].style.overflow = "";
document.getElementById("extend-nav-container").style.display = "none";
}
var x = window.matchMedia("(max-width: 768px)")
myFunction(x);
x.addListener(myFunction);
.new-nav {
background: black;
display: flex;
transition: 0.5s;
justify-content: center;
}
.new-nav .container {
width: 98%;
height: 98%;
transition: 0.5s;
}
#extend-nav ul {
list-style-type: none;
height: 100%;
transition: 1s;
}
#extend-nav li {
margin-bottom: 10px;
}
#extend-nav a {
text-decoration: none;
color: white;
font-weight: lighter;
transition: 0.5s;
}
<div class="new-nav" id="extend-nav">
<div class="container" id="extend-nav-container">
<ul id="second-nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#">Ban</a></li>
<li><a href="#">Warn</a></li>
<li><a href="#">Gift</a></li>
<li><a href="#">Records</a></li>
<li><a href="#">Moderator</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Account</i></a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
</div>
解决方案
当用户单击您的汉堡包或菜单上的某个位置时,您可以使用 javascript 来切换类。
Display: none
不能与过渡效果一起应用,因此您需要使用visibility
属性来代替。
function myFunction() {
var element = document.getElementById("second-nav-ul");
element.classList.toggle("collapse");
}
.nav {
list-style-type: none;
margin: 0;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #000;
height: 50px;
}
ul li a {
color: #FFF;
}
.collapse {
height: 0px;
padding: 0px;
visibility: hidden;
transition:all 0.1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-nav" id="extend-nav">
<button onclick="myFunction()">Toggle Me</button>
<div class="container" id="extend-nav-container">
<ul id="second-nav-ul" class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Ban</a></li>
<li><a href="#">Warn</a></li>
<li><a href="#">Gift</a></li>
<li><a href="#">Records</a></li>
<li><a href="#">Moderator</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
</div>
推荐阅读
- html - 有没有办法在 CSS 中链接样式表而不是每个 HTML 页面?
- html - 搜索栏转到下一行
- java - Spring Boot - Mongodb - 基于另一个字段的自动递增字段
- ember.js - 如何修复 Sentry 用户反馈错误 - 无法读取未定义的属性“showReportDialog”
- c - 声明使用 SAL 定义类型的宏时出现错误 C2059 (?)
- nginx - 在 AWS EC2 上运行烧瓶服务器,只有 gunicorn 但没有 nginx
- sql-server - 如何从 perl 中的 SQLSERVER 表中读取特殊字符?
- amazon-web-services - Errno 13:权限被拒绝:'C:\\Users\\myname\\.aws' 运行命令时:AWS Configure
- excel-formula - 我有一个可能有也可能没有某些列的数据源表
- python - cv2.createTrackbar 回调函数