當您單擊元素

Question

我試圖做一個移動菜單之外更改CSS高度： 這裏是的jsfiddle：http://jsfiddle.net/qo81bunh/

在代碼中，當u點擊按鈕展開的菜單，這是代碼：

.header .menu-btn:checked ~ .menu { 
    max-height: 240px; 
} 

當u點擊「X」，這裏是它崩潰的代碼：

.header .menu { 
    clear: both; 
    max-height: 0; 
    transition: max-height .2s ease-out; 
} 

我覺得每次ü按一下按鈕，它改變最大高度。

我的問題是你如何做到這一點，當你點擊按鈕/「X」以外的其他地方時，它會關閉菜單，如果它是打開的。謝謝

我該如何做到這一點，如果可能的話？如果沒有，jQuery？

Answer 1

您需要通過在單擊文檔時添加事件偵聽器來使用javascript（或jquery）。然後它可以檢查菜單是否處於活動狀態（在您的情況下輸入已被選中），然後關閉它。

document.addEventListener('click', function(e){ 
    var btn = document.querySelector('.menu-btn'); 
    if (btn && btn.checked) { 
    btn.click(); 
    } 
}); 

我已經編輯回合的jsfiddle http://jsfiddle.net/qo81bunh/1/