關閉時，用戶點擊菜單外

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更換標籤