使用相同的按钮打开和关闭菜单(关闭不起作用)
Open & Close Menu with the same button (Closing not working)
我正在尝试制作一个覆盖菜单,通过单击同一菜单打开和关闭。我已经尝试使用我在这个论坛上看到的一些解决方案,但我目前拥有的代码只能打开菜单而不能关闭它?
document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav(){
navSize = document.getElementById("myNav").style.width;
if (navSize == 20) {
return close();
}
return open();
}
function open() {
document.getElementById("myNav").style.width = "20%";
}
function close() {
document.getElementById("myNav").style.width = "0";
}
这是fiddle:https://jsfiddle.net/Santos1600/j2L7yga5/1/
我已经在使用不同的按钮关闭菜单时让菜单正常工作,但从设计的角度来看,如果同一个按钮在单击时执行这两个操作,我会更喜欢它。
宽度计算有误
function toggleNav() {
navSize = document.getElementById("myNav").offsetWidth;
if (navSize > 0) {
return close();
}
return open();
}
如果您需要在点击不同条目后将其关闭
你有两个选择:
1) 如果您单击任何 link 只需添加
即可关闭菜单
onclick="toggleNav();"
到特定的 link。
2) 或者以更通用的方式,在 link 上添加一个 class ex "mylink"
和
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'mylink') {
toggleNav();
}
}, false);
在您的代码中
试试这个:https://jsfiddle.net/reyq2064/
// document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav() {
navSize = document.getElementById("myNav").style.width;
if (navSize == '20%') {
return close();
}
return open();
}
我正在尝试制作一个覆盖菜单,通过单击同一菜单打开和关闭。我已经尝试使用我在这个论坛上看到的一些解决方案,但我目前拥有的代码只能打开菜单而不能关闭它?
document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav(){
navSize = document.getElementById("myNav").style.width;
if (navSize == 20) {
return close();
}
return open();
}
function open() {
document.getElementById("myNav").style.width = "20%";
}
function close() {
document.getElementById("myNav").style.width = "0";
}
这是fiddle:https://jsfiddle.net/Santos1600/j2L7yga5/1/
我已经在使用不同的按钮关闭菜单时让菜单正常工作,但从设计的角度来看,如果同一个按钮在单击时执行这两个操作,我会更喜欢它。
宽度计算有误
function toggleNav() {
navSize = document.getElementById("myNav").offsetWidth;
if (navSize > 0) {
return close();
}
return open();
}
如果您需要在点击不同条目后将其关闭 你有两个选择: 1) 如果您单击任何 link 只需添加
即可关闭菜单onclick="toggleNav();"
到特定的 link。
2) 或者以更通用的方式,在 link 上添加一个 class ex "mylink"
和
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'mylink') {
toggleNav();
}
}, false);
在您的代码中
试试这个:https://jsfiddle.net/reyq2064/
// document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav() {
navSize = document.getElementById("myNav").style.width;
if (navSize == '20%') {
return close();
}
return open();
}