我正在使用 Bootstrap 中的以下代码片段在导航栏中显示侧边栏。我可以通过点击侧边栏中的X按钮来关闭导航栏。我如何更改我的closeNav javascript，使其能够通过点击页面上的任意位置来关闭侧边栏，以及仅使用javascript的关闭按钮？第一个
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！
xpszyzbs2#
只需向div添加一个事件侦听器：第一个
1yjd4xko3#
只需将closeNav附加到主体并停止openNav中事件的传播。第一个
6yjfywim4#
这是我的方法-基本上只是添加另一个事件侦听器到主区域，如果菜单是打开的，单击时关闭它，否则不做任何事情：还有......在你的直播网站上，仅供参考，我会更改var mainArea = document.querySelector("#main");至：var mainArea = document.querySelector("body");以获得最佳效果第一个
var mainArea = document.querySelector("#main");
var mainArea = document.querySelector("body");
4条答案
按热度按时间kognpnkq1#
首先，我建议你不要在HTML中使用onclick属性，这就是创建事件监听器的原因
其次，只需以同样的方式向#main div添加另一个事件侦听器，记住可以用不同的元素触发相同的事件，而不会有任何问题
记住总是使用事件监听器，而不是在HTML中使用JS！
xpszyzbs2#
只需向div添加一个事件侦听器：
第一个
1yjd4xko3#
只需将closeNav附加到主体并停止openNav中事件的传播。
第一个
6yjfywim4#
这是我的方法-基本上只是添加另一个事件侦听器到主区域，如果菜单是打开的，单击时关闭它，否则不做任何事情：
还有......在你的直播网站上，仅供参考，我会更改
var mainArea = document.querySelector("#main");至：
var mainArea = document.querySelector("body");以获得最佳效果
第一个