Javascript 单击页面上的其他位置时折叠移动标题

我目前正在使用一个非常基本的标题（我最终希望它在打开和折叠时具有动画效果，并使汉堡菜单在关闭图标之间具有动画效果）。标题是响应性的，用户可以在点击关闭图标时折叠标题。当点击标题以外的位置时，如何使其折叠：

这是我目前正在做的工作

body，
html{
最大宽度：100%；
填充：0vw；
利润率：0vw；
}
.标题{
背景色：#ffffff；
位置：固定；
最高：0%；
左：0%；
右：0%；
高度：10vh；
z指数：1；
边框底部：实心；
显示器：flex；
证明内容：之间的空间；
}
海德菲尔先生{
高度：10vh；
边界：无；
}
.收割台容器{
宽度：100%；
高度：自动；
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
保证金：自动；
左边距：自动；
右边距：自动；
}
.标志容器{
浮动：左；
宽度：40%；
左侧填充：1vh；
显示器：flex；
flex-flow：行nowrap；
对正内容：左；
}
.导航集装箱{
宽度：60%；
显示器：flex；
flex-flow：行nowrap；
//对正内容：空间均匀；
保证金：自动；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
.均匀地间隔{
对正内容：空间均匀；
}
@仅介质屏幕和（最大宽度：500px）{
.标志容器{
浮动：左；
宽度：80%；
左侧填充：1vh；
显示器：flex；
flex-flow：行nowrap；
对正内容：左；
}
}
@仅介质屏幕和（最大宽度：500px）{
.导航集装箱{
宽度：20%；
显示器：flex；
flex-flow：行nowrap；
//对正内容：空间均匀；
保证金：自动；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
.均匀地间隔{
对正内容：空间均匀；
}
}
.标志{
高度：8vh；
最大宽度：40%；
垫面：1.5vh；
垫底：0.5vh；
左：4vh；
显示：块；
对象匹配：包含；
}
@仅介质屏幕和（最大宽度：500px）{
.标志{
高度：8vh；
最大宽度：80%；
垫面：1.5vh；
垫底：0.5vh；
左：2vh；
显示：块；
对象匹配：包含；
}
}
img{
-webkit用户拖动：无；
}
.导航{
字体系列：“Roboto”，衬线；
字体大小：2vw；
文本对齐：居中；
页边顶部：自动；
页边距底部：自动；
颜色：#000000；
左填充：自动；
右侧填充：自动；
线高：1米；
对象匹配：包含；
文字装饰：无；
}
@仅介质屏幕和（最大宽度：500px）{
.导航{
字体系列：“Roboto”，衬线；
字体大小：8vw；
文本对齐：左对齐；
边际上限：2vh；
页边距底部：自动；
颜色：#000000；
左：2vh；
右侧填充：2vh；
线高：1米；
对象匹配：包含；
文字装饰：无；
}
}
.导航：悬停{
颜色：#096e67；
}
a:链接{
颜色：#000000；
文字装饰：无；
}
h1{
字体系列：“Roboto”，衬线；
字体大小：4vw；
文本对齐：左对齐；
边际上限：0px；
边缘底部：0px；
颜色：#000000；
左：4vh；
右侧填充：2vh；
垫底：0.5vh；
线高：1米；
}
@仅介质屏幕和（最大宽度：500px）{
h1{
字体系列：“Roboto”，衬线；
字体大小：8vw；
文本对齐：左对齐；
边际上限：0px；
边缘底部：0px；
颜色：#000000；
左：2vh；
右侧填充：2vh；
垫底：0.5vh；
线高：1米；
}
}
导航{
显示器：flex；
宽度：100%；
对正内容：空间均匀；
右边距：自动；
文本对齐：右对齐；
}
导航a{
显示：块；
}
我{
显示：无！重要；
}
@介质（最大宽度：500px）{
导航{
位置：绝对位置；
最高：100%；
左：0；
右：0；
显示：无；
}
主动导航{
显示：块；
背景色：浅绿色；
边框顶部：实心；
边框底部：绿色实心0.2vh；
填充：1vh；
垫底：2vh；
}
我{
显示：块！重要；
保证金：5px；
}
}
法兰西{
字体大小：6vh；
填充顶部：2vh；
垫底：2vh；
填充：0vh；
}

网站标题
菜单=document.querySelector（'nav'）；
document.querySelector（'i'）
.addEventListener（'click'，e=>{
menu.classList.toggle（'active'）
document.querySelector（'header i'）.classList.toggle（'fa-bar'））
document.querySelector（'header i'）.classList.toggle（'fa-times'））
})

试试这个

$(document).click(function() {
  $("nav").removeClass("active")
})

$("nav").click(function(e) {
  e.stopPropagation()
  return false
})

$(".fa.fa-bars").click(function(e) {
  e.stopPropagation()
  $("nav").toggleClass("active")
})

---

这应该可以解决你的问题，让我知道结果

let button =document.querySelector('body').addEventListener('click', buttonClick);
function buttonClick(e)
{
    //to view current target on console
    console.log(e.target);

    //checks if you've clicked out side the nav
    if(!e.target.classList.contains('navigation-container'))
    {
        //checks if nav is open
        if(document.querySelector('nav').classList.contains('active'))
        {
            console.log('now closing nav');

            //from your code this should close the nav but adjust to close the nav if this dose not work
            menu.classList.toggle('active')
            document.querySelector('header i').classList.toggle('fa-bars')
            document.querySelector('header i').classList.toggle('fa-times')
        }
    }
}

---

您已经做得很好：）您可以使用java脚本，将事件处理程序设置到页面的其余部分，而不是导航部分，例如：

onmousedown

，然后检查导航是否打开？如果打开，请关闭它。如果你还需要一个更详细的答案，请告诉我。是的，你在mousedown上的

onmousedown

之后失去了我，不知道如何使它崩溃。一旦我弄明白了这一点，我需要能够为它制作动画：/提前谢谢，@BobbyAxeif你可以看4个视频教程，让你了解java脚本的最新情况，但这不起作用。我也在实际的移动设备上进行了测试。注意：

querySelector（'body'）

正在选择您的body标签，因此应该正确关闭

。@phphelp您是否尝试过此修复？结果如何？抱歉，我被其他事情搞得心烦意乱。我试过了，但现在按钮切换，但下拉菜单根本没有显示。