javascript - 将 JQuery 转换为 JS 用于切换类
问题描述
我正在创建一个移动菜单并在 Codepen 上找到了一个示例,唯一的问题是我不想仅为菜单加载 JQuery。我对编码还很陌生,想知道是否有办法将切换类函数转换为纯 javascript。如果您可以制作一个理想的工作示例。此外,如果您知道转换为 javascript 的工具或列出每个函数在两者中的外观的工具,以便我可以自己隐藏它,那会很高兴知道。
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #000;
font-family: Helvetica Neue, Arial, sans-serif;
color: #fff;
overflow: hidden;
}
/* ------------- */
.menu {
position: absolute;
top: 20px;
right: 20px;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 14px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: #333;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #fff;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: #fff;
color: #333;
height: 100%;
width: 100%;
position: fixed;
text-align: center;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
/* ------------- */
.info {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay-info {
text-align: center;
color: #111825;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="info">Content</h1>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<h1 class="overlay-info">
Links
</h1>
</div>
解决方案
使用 onclick="myFunction" 和
function myFunction() {
var menu = document.getElementById("something");
var overlay = document.getElementById("somethingelse");
something.classList.toggle("open");
somethingelse.classList.toggle("open");
}
推荐阅读
- primeng - PrimeNG Treetable 添加节点问题
- java - 在多租户 Spring 应用程序中释放空闲数据源?
- r - 如何计算并列出分组值在同一组中出现的次数?
- python - 列成相关表的行
- matlab - How can I set the space between lines in a plot?
- swift - 对齐类型的 Swift + AppCode 格式
- java - 如何在国际化之前检索 JavaFX 控件中的文本标签
- android - OnClick 事件完成后启动 AlertDialog
- angular - rxjs 带运算符 - 使用异步管道限制结果
- python - NameError:未定义名称“WIDTH_DEGREES”