如何在外部点击时关闭悬停下拉菜单？答案

【问题标题】：How to close hover dropdown menu on outside click?如何在外部点击时关闭悬停下拉菜单？
【发布时间】：2018-04-20 12:04:55
【问题描述】：

我真的不想失去悬停能力，我需要一种不失去悬停能力的方法。

在纯 CSS（无 JavaScript）中，如何在不丢失悬停功能的情况下关闭下拉菜单？

这里有一个例子，他做了一个带有关闭外部点击功能的 JavaScript 下拉菜单。

https://koen.kivits.com/articles/pure-css-menu/

这是我的带有悬停和 onClick 的下拉菜单 CSS：

  .acn-menu {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.9);
}

.label_openclose {
  display: none;
}

.menu-tabs {
  height: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* This CSS makes the Solutions dropdown menu push
   down the other two items when in mobile view. */
@media (min-width: 320px) {
  .menu-tabs {
  position: absolute;
  }
}

.menu-tabs .elem {
  box-sizing: border-box;
  padding: 0 20px;
  float: left;
  height: 100%;
  line-height: 70px;
  background-color: rgb(30, 30, 30);
  color: white;
}

.menu-check {
  display: none;
}


label {
  margin-bottom: 0;
}

.label_openclose {
  display: inline-block;
  width: 60px;
  min-height: 50px;
  background-color: transparent;
  cursor: pointer;
  overflow:hidden;
  display:block;
}

.menu-tabs .elem {
  line-height: initial;
  float: initial;
  height: 0px;
  cursor: pointer;
  border-top: 0px solid #000;
  overflow: hidden;
}

.menu-check:checked~.menu-tabs .elem {
  height: 25px;
  color: white;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.label_openclose:hover~.menu-tabs .elem {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  height: 25px;
}
 .label_openclose~.menu-tabs:hover .elem {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  height: 25px;
}

我是否可以在不使用 JS 的情况下获得点击关闭？这是一个小提琴：https://jsfiddle.net/Ld5L2tnf/

【问题讨论】：

我已从您的帖子中删除了免费工作的请求 - 请始终假设人们愿意提供帮助，但不希望成为免费劳动力的来源。

标签： html css twitter-bootstrap twitter-bootstrap-3 drop-down-menu

【解决方案1】：

我查看了您的代码并发布了您想要的示例。这是实现目标的更简单方法。这是一个示例，您必须将其应用于您的代码。这是一个使用复选框和标签的纯 css 和 html 解决方案。以下是有关其工作原理的详细信息。希望能帮助到你。享受吧。

<html>
<head>
<title></title>
<style>
.buttoncomtainer1{ /*A wrapper for your hover dropdown List*/
width:100px;
height:2em;
float:left;
position:absolute;  
z-index:20;
}
.mycheckButton{ /*Your Label acts as a Button Triggering the checkbox*/
width:100px;
height:2em;
float:left;
display:block;
background-color:blue;
text-align:center;
color:#ffffff;
position:fixed; 
z-index:20;
}
.mycheckDrop{ /*Your Dropdown*/
width:100px;
float:left;
display:none;
padding:1%;
background-color:green;
position:fixed; 
z-index:20;
margin-top:2em;
}

.gone{ /*Make your checkbox disappear*/
border:0px;
outline:none;
line-height:0;
display:none;
margin:0px;
padding:0px;
width:0px;
height:0px;
}
.blackout{ /*This Div covers the page with the labelBlackout Label in it. nothing can be clicked unless The Label inside clicked first triggering the checkbox. */
width:100%;
height:100%;
float:left;
position:fixed;
z-index:15; 
background-color:transparent; /*    You can add a background color like this. background-color:black; opacity:0.7;*/
display:none;
}  
.labelBlackout{ /*the Label inside the blackout div that covers the page*/
width:100%;
height:100%;
float:left; 
}  
.lnkCon{    /*  Container that holds your dropdown links.*/
width:100%;
height:2em;
float:left; 
margin-top:5px;
}
input[type=checkbox].gone:checked ~ div.blackout{display:block;}  
input[type=checkbox].gone:checked ~ label.mycheckDrop{display:block;}    
.buttoncomtainer1:hover > .mycheckDrop{display:block;}


</style>
</head>
<body>
<div class="buttoncomtainer1">
<input class="gone" id="myCheck" type="checkbox" >
<div class="blackout" ><label class="labelBlackout" for="myCheck"></label></div>
<label class="mycheckButton" for="myCheck">DropDown</label>
<label class="mycheckDrop" for="myCheck">
<span class="lnkCon"><a href="#">Button 1</a></span>
<span class="lnkCon"><a href="#">Button 2</a></span>
<span class="lnkCon"><a href="#">button 3</a></span>
</label></div>
</body>
</html>

【讨论】：