我有一个问题，我想用这个很酷的动画Burger-Menu-Button（“ navicon1”）编写边栏。菜单按钮的炫酷动画效果用于“打开”类。如果我单击菜单按钮，我也想切换功能“ openNav”和“ closeNav”。
这就是我想要的：
如果我第一次单击菜单按钮（navicon1）->菜单按钮
更改为X（有效）并执行javascript函数“ openNav”
如果我第二次单击菜单按钮（navicon1）->菜单按钮
更改为正常（可行）并执行javascript函数
“ closeNav”
这是我的代码：
$(document).ready(function() {
$('#navicon1,#navicon2,#navicon3,#navicon4').click(function() {
$(this).toggleClass('open');
});
});
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
document.getElementById("mySidenav").style.width = "75%";
document.getElementById("main").style.marginLeft = "75%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
check = 0;
}
您可以忽略navicon2-3，它们仅用于CSS ...
感谢您的帮助 ：）
最佳答案
使用变量来记住状态：
var navOpen = false;
$("#navicon1").click(function() {
if (navOpen) {
closeNav();
navOpen = false;
} else {
openNav();
navOpen = true;
}
});