当导航栏打开时,使用Javascript if-else触发css转换
我有一个汉堡包菜单按钮,当使用css和javascript单击时,它会转换为“X”。因为我的导航栏在进行选择时关闭,而不仅仅是在单击菜单按钮时,菜单按钮保持为“X” 我假设我需要使用“if-else”语句来告诉菜单按钮进行更改,而不是单击,但我不确定如何对其进行编码 我已经包括了按钮样式的css代码,以及当前用于转换的javascript和用于导航栏的javascript 按钮代码来自此站点: 导航栏就在这里: 按钮CSS代码:当导航栏打开时,使用Javascript if-else触发css转换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个汉堡包菜单按钮,当使用css和javascript单击时,它会转换为“X”。因为我的导航栏在进行选择时关闭,而不仅仅是在单击菜单按钮时,菜单按钮保持为“X” 我假设我需要使用“if-else”语句来告诉菜单按钮进行更改,而不是单击,但我不确定如何对其进行编码 我已经包括了按钮样式的css代码,以及当前用于转换的javascript和用于导航栏的javascript 按钮代码来自此站点: 导航栏就在这里: 按钮CSS代码: .c-hamburger { display: block
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: white;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background-color: #fff;
content: "";
}
.c-hamburger span::before {
top: -20px;
}
.c-hamburger span::after {
bottom: -20px;
}
.c-hamburger {
background-color: #ff3264;
}
.c-hamburger span {
transition: background 0s 0.3s;
}
.c-hamburger span::before,
.c-hamburger span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.c-hamburger span::before {
transition-property: top, transform;
}
.c-hamburger span::after {
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger.is-active {
background-color: #cb0032;
}
.c-hamburger.is-active span {
background: none;
}
.c-hamburger.is-active span::before {
top: 0;
transform: rotate(45deg);
}
.c-hamburger.is-active span::after {
bottom: 0;
transform: rotate(-45deg);
}
.c-hamburger.is-active span::before,
.c-hamburger.is-active span::after {
transition-delay: 0s, 0.3s;
}
按钮Javascript:
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
/* 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 = "200px";
open = true;
}
/* 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";
open = false;
}
导航栏Javascript:
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
/* 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 = "200px";
open = true;
}
/* 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";
open = false;
}
如果有人能帮我找到正确的代码,或者有更好的想法,我会非常感激。如果你还不知道的话,我对Javascript还是很陌生的
谢谢 我不太明白你在干什么。您的意思是,您希望在单击按钮时关闭导航栏,而不仅仅是在单击“X”时 如果是这样,在HTML代码中,只需将
onclick=“closeNav();”
添加到每个按钮。像这样的
<button onclick = "closeNav();"> My Button </button>
对不起,我不是想把它关闭,我是想让菜单按钮(.c-hamburger)在导航栏打开时变成“X”。目前,菜单按钮只有在点击时才会变成“X”。我已经编辑了我的答案。试试看,请让我知道它是否有效。谢谢。嘿,谢谢你。它仍然不能与您的代码一起工作。我已经上传了网站的当前状态,你可以在这里看到:我正在尝试设置动画的按钮是左边那个大的未格式化按钮。确保缩小窗口宽度以查看移动导航barI已更新我的答案。我这次工作。我之前建议的旧Javascript代码不起作用(您在条件中键入了
!=
,尽管我认为这不是原因),请删除它。无需担心。我刚刚将section按钮的onClick函数改为decision(),它工作得非常好!非常感谢