关闭时，用户点击菜单外

Question

我创建一个CSS下拉菜单，而无需使用JavaScript和研究之后，我发现这个代码 http://jsfiddle.net/zsp7t/1/

<div class="dropdown" id="dropdown"> 
    <input type="checkbox" id="drop1" /> 
    <label for="drop1" class="dropdown_button"> 
     <img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span id="arrowSpan" class="arrow"></span> 
    </label> 
    <ul class="dropdown_content"> 
     <li><a href="#">Privacy settings</a> 
     </li> 
     <li><a href="#">Account settings</a> 
     </li> 
     <li><a href="#">Logout</a> 
     </li> 
    </ul> 
</div> 

这里一个弹出式菜单的CSS

body { 
    background-color: white; 
    font: normal 11px Tahoma, Verdana, Arial, Sans-Serif; 
    color: #222; 
    height: 380px; 
} 

#arrowSpan{ 
    display:block; 
    margin-left:17px; 
    margin-top:2px; 
    margin-bottom:5px; 
} 

.dropdown { 
    display: block; 
    display: inline-block; 
    margin: 0px 3px; 
    position: relative; 
} 
/* ===[ For demonstration ]=== */ 
.dropdown { 
    margin-top: 25px 
} 
/* ===[ End demonstration ]=== */ 
.dropdown .dropdown_button { 
    cursor: pointer; 
    width: auto; 
    display: inline-block; 
    padding: 0px 0px; 
    border: 1px solid silver; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 2px; 
    font-weight: bold; 
    color: #717780; 
    line-height: 16px; 
    text-decoration: none !important; 
    background: white; 
} 
.dropdown input[type="checkbox"]:checked + .dropdown_button { 
    border: 1px solid #3B5998; 
    color: white; 
    background: silver; 
    -moz-border-radius-topleft: 2px; 
    -moz-border-radius-topright: 2px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-radius: 2px 2px 0px 0px; 
    border-radius: 2px 2px 0px 0px; 
    border-bottom-color: silver; 
} 
.dropdown input[type="checkbox"] + .dropdown_button .arrow { 
    display: inline-block; 
    width: 1px; 
    height: 1px; 
    border-top: 5px solid silver; 
    border-right: 5px solid transparent; 
    border-left: 5px solid transparent; 
} 
.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { 
    border-color: white transparent transparent transparent 
} 
.dropdown .dropdown_content { 
    position: absolute; 
    border: 1px solid #777; 
    padding: 0px; 
    background: white; 
    margin: 0; 
    display: none; 
    right:0; 
} 
.dropdown .dropdown_content li { 
    list-style: none; 
    margin-left: 0px; 
    line-height: 16px; 
    border-top: 1px solid #FFF; 
    border-bottom: 1px solid #FFF; 
    margin-top: 2px; 
    margin-bottom: 2px; 
} 
.dropdown .dropdown_content li:hover { 
    background: silver; 
} 
.dropdown .dropdown_content li a { 
    display: block; 
    padding: 2px 7px; 
    padding-right: 15px; 
    color: black; 
    text-decoration: none !important; 
    white-space: nowrap; 
} 
.dropdown .dropdown_content li:hover a { 
    color: white; 
    text-decoration: none !important; 
} 
.dropdown input[type="checkbox"]:checked ~ .dropdown_content { 
    display: block 
} 
.dropdown input[type="checkbox"] { 
    display: none 
} 

这对我来说是完美的......唯一的问题是，我希望用户在空白区域外单击时消失（取消选中框） 所以有什么帮助吗？

注：我不想用任何JavaScript

Answer 1

您可以使用<a>标签没有目标（上href仅哈希），并利用其:focus属性： HTML：http://jsfiddle.net/sVxxZ/1/

<span class="dropdown"> 
    <a href="#"> 
     Dropdown 
    </a> 
    <span class="dropdown_content">asdf</span> 
</span> 

CSS：

.dropdown_content { 
    display: none; 
} 
.dropdown a:focus + .dropdown_content { 
    display: block; 
} 

<a>标签（链接s）有一个特殊的行为，当它们被点击时，它会接收到:focus伪类，直到用户点击其他东西。例如，在IE和一些旧版本的Firefox和Chrome中，这被用来在最后点击的链接周围添加虚线边框。点击其他任何地方都会忽略此边框。

这后来被标准化为:focus伪类，它被应用于可用元素（输入，链接等），当它们被点击/触摸/标签时，直到它们离开焦点（用户点击/触摸/标签离开）别的东西。链接（<a>元素）也需要href属性可点击（可用）。

通过将href设置为#，我们告诉浏览器导航到此页面到名为（yes，nothing）的锚点。由于该锚点不存在，所以没有任何反应，但链接仍然是可点击的，因此在集中时将应用伪类。

我们有dropdown_content与display:none，所以它默认是隐藏的。通过这个，我们使用兄弟选择器+来选择一个类别为dropdown_content的元素，该元素在其之前（在HTML中）具有:focus ed链接，并将其display设置为block（一个可见值）。当用户点击其他内容（包括菜单中的任何内容）时，菜单将关闭，因为该链接不会有:focus。

如果你想有菜单保持打开状态，如果用户点击里面，你将不得不更改CSS选择器位（实际上只是删除+），并把菜单<div>的<a>标签内。

你原来拨弄必要的改动：http://jsfiddle.net/zsp7t/32/

Answer 2

使用标签的覆盖。我会喜欢使用JS。

<div class="dropdown" id="dropdown"> 
    <input type="checkbox" id="drop1" /> 
    <label for="drop1" class="dropdown_button"> 
     <img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span id="arrowSpan" class="arrow"></span> 
    </label> 
    <span class="dropdown_button_dummy"> 
     <img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span id="arrowSpan" class="arrow"></span> 
    </span> 
    <div class="ddw"> 
     <ul class="dropdown_content"> 
      <li><a href="#">Privacy settings</a></li> 
      <li><a href="#">Account settings</a></li> 
      <li><a href="#">Logout</a></li> 
     </ul> 
    </div> 
</div> 

从.dropdown删除position: relative;做出相对于身体的标签。

.dropdown { 
    display: inline-block; 
} 

.dropdown .dropdown_button { 
    display: inline-block; 
    /* Style */ 
} 

.dropdown .dropdown_button_dummy { 
    display: none; 
} 

.dropdown input[type="checkbox"]:checked ~ .dropdown_button_dummy { 
    display: inline-block; 
    /* Style */ 
} 

.dropdown input[type="checkbox"]:checked + .dropdown_button { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    display: block; 
    z-index: 1; 
    /* Remove styles */ 
} 

.dropdown .ddw { 
    position: relative; 
    z-index: 2; 
} 

.dropdown input[type="checkbox"]:checked ~ .ddw > .dropdown_content { 
    display: block 
} 

.dropdown input[type="checkbox"] { 
    display: none 
} 

因为你失去的下拉按钮创建一个dropdown_button_dummy更换标签