如何在使用Javascript单击外部元素时切换类？

我在用电话。我编写了一些javascript，以便能够在mobile上切换菜单并切换profile pic工具提示。但是，当在其外部单击时，profile pic工具提示不会关闭

我当前的javascript代码仅在点击时打开和关闭配置文件pic工具提示。单击外部时，它不会隐藏工具提示

我尝试使用单击事件监听器，并在事件监听器启动时关闭工具提示，但没有成功

使用Javascript，如何在外部单击时隐藏配置文件pic工具提示

document.getElementById（'togglemebutton'）。onclick=function（）{
document.getElementById（“resultnav”）.classList.toggle（“隐藏”）；
}
//document.getElementById（'togglemebutton'）。onclick=function（）{
//document.getElementById（“toggleme”）.classList.toggle（“隐藏”）；
//}
document.getElementById（'toggleprofile'）。onclick=function（）{
document.getElementById（“resultprofile”）.classList.toggle（“隐藏”）；
}

我尝试使用单击事件侦听器，并在 事件侦听器已启动，但无法正常工作

这正是您需要的，所有元素上的事件侦听器：

const toggleprofile = document.getElementById("toggleprofile");
const resultprofile = document.getElementById("resultprofile");

[...document.querySelectorAll('body')].forEach(el => {
//in order to get all elements
  el.addEventListener('click', event => {
//add click event to all of them
    if (event.target.parentElement.id !== "toggleprofile") {
// if element is not profile picture - parent button has id, easier to target
      console.clear();
      console.log(event.target.parentElement.id)
      resultprofile.classList.add("hidden")
//add class
    }else{
    resultprofile.classList.toggle("hidden")}
//if it is profile, toggle class
  })
})

请记住，现在您在页面上的所有元素上都有了click event listener，所以若您需要其他元素，只需扩展它即可

工作示例：

document.getElementById（'togglemebutton'）。onclick=function（）{
document.getElementById（“resultnav”）.classList.toggle（“隐藏”）；
}
//document.getElementById（'togglemebutton'）。onclick=function（）{
//document.getElementById（“toggleme”）.classList.toggle（“隐藏”）；
//}
const toggleprofile=document.getElementById（“toggleprofile”）；
const resultprofile=document.getElementById（“resultprofile”）；
[…document.queryselectoral（'body'）].forEach（el=>{
el.addEventListener（'单击'，事件=>{
if（event.target.parentElement.id！=“toggleprofile”）{
console.clear（）；
console.log（event.target.parentElement.id）
resultprofile.classList.add（“隐藏”）
}否则{
resultprofile.classList.toggle（“隐藏”）}
})
})

正文{
高度：300px}

我尝试使用单击事件侦听器，并在 事件侦听器已启动，但无法正常工作

这正是您需要的，所有元素上的事件侦听器：

const toggleprofile = document.getElementById("toggleprofile");
const resultprofile = document.getElementById("resultprofile");

[...document.querySelectorAll('body')].forEach(el => {
//in order to get all elements
  el.addEventListener('click', event => {
//add click event to all of them
    if (event.target.parentElement.id !== "toggleprofile") {
// if element is not profile picture - parent button has id, easier to target
      console.clear();
      console.log(event.target.parentElement.id)
      resultprofile.classList.add("hidden")
//add class
    }else{
    resultprofile.classList.toggle("hidden")}
//if it is profile, toggle class
  })
})

请记住，现在您在页面上的所有元素上都有了click event listener，所以若您需要其他元素，只需扩展它即可

工作示例：

document.getElementById（'togglemebutton'）。onclick=function（）{
document.getElementById（“resultnav”）.classList.toggle（“隐藏”）；
}
//document.getElementById（'togglemebutton'）。onclick=function（）{
//document.getElementById（“toggleme”）.classList.toggle（“隐藏”）；
//}
const toggleprofile=document.getElementById（“toggleprofile”）；
const resultprofile=document.getElementById（“resultprofile”）；
[…document.queryselectoral（'body'）].forEach（el=>{
el.addEventListener（'单击'，事件=>{
if（event.target.parentElement.id！=“toggleprofile”）{
console.clear（）；
console.log（event.target.parentElement.id）
resultprofile.classList.add（“隐藏”）
}否则{
resultprofile.classList.toggle（“隐藏”）}
})
})

正文{
高度：300px}

请插入css！没有CSS，因为代码使用了Tailwind。如果你点击运行代码按钮，它会显示所有内容。请插入css！没有CSS，因为代码使用了Tailwind。如果单击“运行代码”按钮，它将显示所有内容。还可以将侦听器添加到窗口对象本身。对于事件侦听器部分，使用窗口/文档将如何工作？window.addEventListener（'click'，event=>{If（event.target.parentElement.id！==“toggleprofile”）{console.clear（）；console.log（event.target.parentElement.id）resultprofile.classList.add（“hidden”）}否则{resultprofile.classList.toggle（“hidden”）}）也可以添加列表