Javascript 显示覆盖全屏div，然后通过单击隐藏它

我不熟悉html/css/jquery语言，所以如果我的问题太明显，请原谅

我的目标是在单击一个div时显示一个全屏覆盖div（这一步实际上使用了切换功能），然后通过单击它使相同的div消失

我浏览了许多相关话题，但似乎找不到解决问题的方法。如何通过单击全屏div的任意位置使其消失（由于第一个div是故意隐藏的，因此单击后退不是一个选项）

以下是我目前的代码：

JavaScript（jQuery）：

$(function() {
    $("#bandeau").click(function() {
        $("#full_screen").toggle();
    }); 
});

<div id="bandeau">content</div>

<div id="full_screen">
    <div class="info_visible" id="about">content</div>
</div>

#bandeau {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 57px;
    z-index: 1000;
    position: fixed;
}

#full_screen {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: fixed;
    display: none;
    margin: 0px;
    padding: 0px;
}

.info_visible {
    width: 100%;
    height: auto;
    color: white;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    position: fixed;
}

HTML:

$(function() {
    $("#bandeau").click(function() {
        $("#full_screen").toggle();
    }); 
});

<div id="bandeau">content</div>

<div id="full_screen">
    <div class="info_visible" id="about">content</div>
</div>

#bandeau {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 57px;
    z-index: 1000;
    position: fixed;
}

#full_screen {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: fixed;
    display: none;
    margin: 0px;
    padding: 0px;
}

.info_visible {
    width: 100%;
    height: auto;
    color: white;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    position: fixed;
}

---

尝试用以下代码替换jQuery代码

$(function(){

        $("#bandeau").click(function(){

            $("#full_screen").show();

        });

        $("#full_screen").click(function(){

            $(this).hide();

        });



    });

---

这将打开或关闭全屏

---

下面是一个简单易行的方法，只需一个命令和完整的解释。享受和欢迎网站开发

注意：滚动至答案末尾，查看有用链接的简短列表

//这只是document.ready=函数的jQuery简写。。。
$（函数（）{
//这就是动态分配事件的方法
//为什么这么重要？比如说，在未来，
//您决定在页面加载后添加元素，
//这允许新元素仍然使用您分配的相同事件
$（文件）
//.on和.off看起来很简单，
//打开将事件添加到一组元素中，关闭则删除
//您会注意到，我只为两个元素指定了一个方法
//原因很简单
//您所需要的只是根据需要隐藏或显示一个元素
//单击其中一个div
.on（'click'，'bandeau，'full#u screen'，函数（e）{
//.toggle接受booleen参数
//如果为真=显示，如果为假=隐藏
//因此，我只需在参数中测试id名称！
$（“#全屏”）。切换（this.id==“bandeau”）；
})
});
#bandeau{
背景色：黑色；
颜色：绿色；
溢出：隐藏；
光标：十字线；
宽度：100%；
高度：57px；
z指数：1000；
位置：固定；
}
#全屏{
背景色：黑色；
溢出：隐藏；
光标：十字线；
宽度：100%；
身高：100%；
z指数：1000；
位置：固定；
显示：无；
边际：0px；
填充：0px；
}
.info_可见{
宽度：100%；
高度：自动；
颜色：白色；
填充顶部：10px；
垫底：20px；
左侧填充：30px；
位置：固定；
}

内容
特涅特诺克
带有undercover复选框的纯CSS解决方案：


html{
宽度：100%；
身高：100%；
背景：薰衣草；
文本对齐：居中；
字体系列：arial，无衬线；
}
输入{
显示：无；
}
#目标{
显示：无；
}
#单击：选中~label>#目标{
位置：固定；
排名：0；
左：0；
显示：内联块；
身高：100%；
宽度：100%；
背景：url（'http://i.imgur.com/bv80Nb7.png');
背景重复：无重复；
背景大小：100%100%；
}
.项目{
位置：固定；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
左：0；
右：0；
保证金：自动；
光标：指针；
用户选择：无；
-webkit用户选择：无；
}
#警告{
位置：固定；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
左：0；
右：0；
保证金：自动；
}

单击此处
全屏内容
非常感谢！这真的很有用。@soph.a不知道你是否看到了，但我只是用更多的信息更新了它