当用户单击任何HTML元素时执行特定操作

我正在使用复选框输入创建导航按钮，单击该按钮时将下拉子菜单。每当用户单击标签输入时，会选中“菜单”下拉菜单，再次单击标签时，标签会被折叠回去

但现在我需要执行特定的操作，我尝试在单击任何HTML元素时使下拉菜单折叠，所以用户不需要单击特定的元素来折叠菜单

专门用于下拉菜单的HTML和CSS代码：

<ul class="down-bar" style="list-style:hidden">
    <div class="dropdown">
        <input type="checkbox" value="drop" id="drop-1" class="dropper">
        <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Click <b class="caret"> &#9660;</b></label></li>
        <div class="dropdown-menu">
            <a href="#">Link</a>
        </div>
    </div>

---

我尝试过几个例子，比如使用全宽锚定标记，但是主菜单会消失，我打算使用

：active

标记将菜单的显示改回

无。看。（删除全幅示例的注释标记）

所以在结论中，我如何在不让其他元素消失的情况下实现这一点，我的代码中是否有错误？第一个例子是好的解决方案吗？如果是，怎么做？当用户单击任何HTML元素时，如何使菜单向后折叠？不使用Javascript可以实现这一点吗？
如果您对Javascript解决方案满意，可以使用以下示例：


$（文档）。单击（函数（e）{
如果（！（$（'down-nav-1'）.is（e.toElement）|$（'down-1'）.is（e.toElement）））{
$（'.dropper'）.prop（'checked'，false）
}
});
。下拉列表{
显示：内联块；
浮动：左；
填充顶部：0em；
过渡：0.1s缓进；
利润率最高：1.5%；
空白：nowrap；
}
.下拉菜单{
浮动：左；
显示：无；
最高：0%；
利润率最高：2.2%；
宽度：8%；
最小宽度：50px；
左侧填充：18px；
背景色：rgba（26,26,26,2）；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：99；
列表样式类型：无；
过渡：0.1s缓进；
边框颜色：黑色；
边界半径：3px；
}
.下拉菜单a{
颜色：白色；
字号：0.9em；
填充：0px 2px 0px 0px；
文字装饰：无；
显示：块；
列表样式类型：无；
空白：nowrap；
左：0%；
左边缘：0%；
}
.下拉菜单a：悬停{
颜色：#C90205；
}
滴管{
显示：无；
可见性：隐藏；
}
.滴管：选中~.下拉菜单{
显示：块；
z指数：99；
}
.滴管：已检查~li#down-nav-1{
边框：实心3倍灰色；
背景颜色：灰色；
利润率最高：1.5%；
左缘：3%；
边界半径：10px；
}


单击▼
感谢您提供的解决方案，仅使用HTML/CSS是不可能的吗？对于当前的结构，我不确定是否有。您好，它不起作用（没有更改），我想这是因为我导入静态文件时出错了，我的网站使用了django framework，这就是我添加到代码中的内容：
我做错了什么吗？很抱歉，我从未使用过javascript。如果您将代码放入
/Home/Home.js
中，那么文件
jquery.min.js
应该会出现在前面。欢迎：）如果您还没有投票，也将感谢您对答案的支持！
.dropdown {
  display: inline-block;
  float: left;
  padding-top: 0em;
  transition: 0.1s ease-in;
  margin-top: 1.5%;
  white-space: nowrap;
}
.dropdown-menu {
  float: left;
  display: none;
  top: 0%;
  margin-top: 2.2%;
  width: 8%;
  min-width: 50px;
  padding-left: 18px;
  background-color: rgba(26, 26, 26, 2);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
  list-style-type: none;
  transition: 0.1s ease-in;
  border-color: black;
  border-radius: 3px;
}
.dropdown-menu a {
  color: white;
  font-size: 0.9em;
  padding: 0px 2px 0px 0px;
  text-decoration: none;
  display: block;
  list-style-type: none;
  white-space: nowrap;
  left: 0%;
  margin-left: 0%;
}
.dropdown-menu a:hover {
  color: #C90205;
}
.dropper {
  display: none;
  visibility: hidden;
}
.dropper:checked ~ .dropdown-menu {
  display: block;
  z-index: 99;
}
.dropper:checked ~ li #down-nav-1 {
  border: solid 3px gray;
  background-color: gray;
  margin-top: 1.5%;
  margin-left: 3%;
  border-radius: 10px;
}