JavaScript-Onclick导航箭头函数问题

我正在尝试创建一个带有导航功能的简单应用程序。我的问题是，当用户单击导航时，它会弹出，但如果用户在导航内容之外单击，内容就会消失，导航箭头也不起作用。下面是我的代码

const menuButtons=document.querySelectorAll（'.clickfun'）；
menuButtons.forEach（button=>button.addEventListener（'click'，toggleButton，false））；
函数toggleButton（）{
const id=this.dataset.id；
const panel=document.getElementById（id）；
如果（panel.style.display==='block'）{
panel.style.display='none'；
}否则{
panel.style.display='block'；
}
} 
var-boxArray=['box1'，'box2']；
window.addEventListener（'mouseup'，函数（事件）{
对于（var i=0；i{
if（anchor.classList.contains（'btn-open'）| | anchor.classList.contains（'btn-down'））{
anchor.addEventListener（'click'，（）=>{
if（anchor.classList.contains（'btn-open'））{
anchor.classList.remove（'btn-open'）；
anchor.classList.add（'btn-down'）；
} 
否则{
anchor.classList.add（'btn-open'）；
anchor.classList.remove（'btn-down'）；
} 
});
}
});

#框1{
位置：绝对位置；
顶部：67px；
左：140像素；
宽度：260px；
高度：55px；
填充：6px；
显示：无；
背景：#E2；
}
.btn打开：之后，a{
字体系列：“FontAwesome”；
内容：“\f0de”；
颜色：#333；
字号：18px；
}
.btn down：之后，a{
字体系列：“FontAwesome”；
内容：“\f0dd”；
颜色：#333；
字号：18px；
文字装饰：无；
}

选项主页
页面内容。。。。
弹出两个

您需要的是在

窗口中显示它。addEventListener（'mouseup'，函数（事件）{

如果单击是在clickfun上，您需要防止显示无

!event.target.classList.contains('clickfun')

请检查这里的代码

const menuButtons=document.querySelectorAll（'.clickfun'）；
menuButtons.forEach（button=>button.addEventListener（'click'，toggleButton，false））；
函数toggleButton（）{
const id=this.dataset.id；
const panel=document.getElementById（id）；
如果（panel.style.display==='block'）{
panel.style.display='none'；
}否则{
panel.style.display='block'；
}
改变箭头（）；
}
var-boxArray=['box1'，'box2']；
window.addEventListener（'mouseup'，函数（事件）{
对于（var i=0；ia===event.target.parentNode.id）&&&！event.target.classList.contains（'clickfun'）&&anchor[0].classList.contains（'btn-open'））{
box.style.display='none'；
改变箭头（）；
event.preventDefault（）；
返回；
}
}
});
函数更改箭头（）{
var anchor=document.querySelectorAll（'.clickfun'）；
if（锚[0].classList.contains（'btn-open'））{
锚[0]。类列表。删除（'btn-open'）；
锚[0]。类列表。添加（'btn-down'）；
}否则{
锚[0]。类列表。添加（'btn-open'）；
锚[0]。类列表。删除（'btn-down'）；
}
}

#框1{
位置：绝对位置；
顶部：67px；
左：140像素；
宽度：260px；
高度：55px；
填充：6px；
显示：无；
背景：#E2；
}
.btn打开：之后，
a{
字体系列：“FontAwesome”；
内容：“\f0de”；
颜色：#333；
字号：18px；
}
.btn down：之后，
a{
字体系列：“FontAwesome”；
内容：“\f0dd”；
颜色：#333；
字号：18px；
文字装饰：无；
}

选项主页
页面内容。。。。
弹出两个

什么是“遇到困难”意思是？你看到了吗？当我点击内容时，它的弹出窗口关闭了，但箭头仍然显示向上。当内容关闭时，我想向下。箭头的功能仍然不像向下箭头。你看到了吗，当我点击内容时，它的弹出窗口关闭了，但箭头仍然显示向上。我想在内容关闭时向下。让我检查一下内容完全关闭，但箭头仍然没有得到默认位置，我的意思是向下？当内容关闭时，它将是向下箭头。谢谢，谢谢朋友。这就是我一直在寻找的内容。非常感谢你的朋友。@sai很高兴这对你有帮助