Bootstrap 单击任意位置关闭侧边导航栏javascript

wgxvkvu9  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(4)|浏览(222)

我正在使用 Bootstrap 中的以下代码片段在导航栏中显示侧边栏。
我可以通过点击侧边栏中的X按钮来关闭导航栏。我如何更改我的closeNav javascript,使其能够通过点击页面上的任意位置来关闭侧边栏,以及仅使用javascript的关闭按钮?
第一个

kognpnkq

kognpnkq1#

首先,我建议你不要在HTML中使用onclick属性,这就是创建事件监听器的原因

document.querySelector('span#open_menu').addEventListener('click', openNav)

document.querySelector('.closebtn').addEventListener('click', closeNav)

其次,只需以同样的方式向#main div添加另一个事件侦听器,记住可以用不同的元素触发相同的事件,而不会有任何问题

document.querySelector('#main').addEventListener('click', closeNav)

记住总是使用事件监听器,而不是在HTML中使用JS!

xpszyzbs

xpszyzbs2#

只需向div添加一个事件侦听器:
第一个

1yjd4xko

1yjd4xko3#

只需将closeNav附加到主体并停止openNav中事件的传播。
第一个

6yjfywim

6yjfywim4#

这是我的方法-基本上只是添加另一个事件侦听器到主区域,如果菜单是打开的,单击时关闭它,否则不做任何事情:
还有......在你的直播网站上,仅供参考,我会更改
var mainArea = document.querySelector("#main");
至:
var mainArea = document.querySelector("body");
以获得最佳效果
第一个

相关问题