为了账号安全,请及时绑定邮箱和手机立即绑定

具有相同按钮的打开和关闭菜单(关闭不起作用)

具有相同按钮的打开和关闭菜单(关闭不起作用)

aluckdog 2022-08-27 14:38:34
我正在尝试制作一个叠加菜单,该菜单通过单击同一菜单来打开和关闭。我已经尝试使用我在这个论坛上看到的一些解决方案,但我目前拥有的代码只能打开菜单而不会关闭它?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";}这是小提琴:https://jsfiddle.net/Santos1600/j2L7yga5/1/我已经让菜单在使用不同的按钮关闭菜单时工作,但是从设计的角度来看,如果同一个按钮在单击时执行这两个操作,我更喜欢它。
查看完整描述

2 回答

?
holdtom

TA贡献1805条经验 获得超10个赞

宽度计算中存在错误


function toggleNav() {

 navSize = document.getElementById("myNav").offsetWidth;

 if (navSize > 0) {

  return close();

 }

  return open();

}

如果您需要在单击不同的条目后关闭它,您有2个选项:1)如果您单击任何链接,只需添加


onclick="toggleNav();"

到特定链接。


2)或者以更通用的方式,在链接上添加一个类,例如“mylink”



document.body.addEventListener('click', function (evt) {

if (evt.target.className === 'mylink') {

   toggleNav();

}

}, false);

在代码中


查看完整回答
反对 回复 2022-08-27
?
蛊毒传说

TA贡献1895条经验 获得超3个赞

试试这个: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();

}


查看完整回答
反对 回复 2022-08-27
  • 2 回答
  • 0 关注
  • 79 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号