JavaScriptを外してクリックするとチェックが外されます

Question

CSSとプレーンJavaScriptを含むドロップダウンメニューを作成しました。誰かが入力要素をチェックしたとき、ドロップダウンメニューは私が望んでいるものを正確に表示します。私が今遭遇した闘いだけがJavaScriptの部分です。チェックボックスは、誰かがドロップダウンメニュー自体とラベルをクリックしていない場合にのみオンにする必要があります（入力/ラベルが純粋なCSSでうまく機能するため）。それ以外のものはこの機能を引き起こします。単純なJavaScriptでのみ！

function validate(e){ 
 
\t var e = event || window.event, // make this works in different browsers 
 
\t \t checkNavbar = document.getElementById("navbar-dropdown-toggle"), // input 
 
\t \t checkboxNavbar = document.getElementById("checkboxNavbar"), // label 
 
\t \t storeDropdown = document.getElementById("storeDropdown"); // unordered list dropdown-menu 
 

 
\t \t 
 
\t if (checkNavbar.checked == true && e.target != checkboxNavbar) { //check if checbox is already checked 
 
\t \t console.log("checkbox is checked"); 
 
\t \t if(e.target != storeDropdown) { 
 
\t \t \t console.log("you do not click on ul and label"); 
 
\t \t \t if(checkNavbar.checked == false) { // if it is clicked outside 
 
\t \t \t checkNavbar.checked = false; // if that is true we should uncheck the checkbox 
 
\t \t \t return false; 
 
\t \t \t } 
 
\t \t } 
 
\t } \t 
 
}; 
 

 
document.addEventListener("click", validate);

.dropdown-label-navbar { 
 
\t height: 55px; 
 
\t width: 100%; 
 
\t display: block; 
 
\t position: absolute; 
 
} 
 
.navbar-dropdown { 
 
    opacity: 0; 
 
    position: absolute; 
 
    margin-left: -999px; 
 
} 
 
\t .dropdown-menu { 
 
\t \t width: 100%; 
 
\t \t background: white; 
 
\t \t position: absolute; 
 
\t \t left: 0; 
 
\t \t right: 0; 
 
\t \t max-height: 0; 
 
\t \t overflow: hidden; 
 
\t \t box-sizing: border-box; 
 
\t } 
 
\t .navbar-dropdown:checked ~ .dropdown-menu { 
 
\t \t display: block; 
 
\t \t transition: max-height 1s; 
 
\t \t max-height: 300px; 
 
\t \t opacity: 1.0; 
 
\t \t border-top: 1px solid #828282; 
 
\t \t border-bottom: 1px solid #828282; 
 
\t } 
 
\t .dropdown-label-navbar { 
 
\t \t height: 25px; 
 
\t \t width: 150px; 
 
\t \t display: block; 
 
\t \t position: absolute; 
 
    border: 1px solid red; 
 
\t }

<input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/> 
 
        <label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label> 
 

 
        <a href="#99" class="main-links">Store</a> 
 
        <ul class="dropdown-menu" id="storeDropdown"> 
 
         <div class="entire-block"> 
 
          <div class="dropdown-image-block"> 
 

 
          </div> 
 
          <li class="list-of-dropdown"> 
 
           <div class="dropdown-list"><a href="case-and-protection.html">Cases and Protection</a></div> 
 
           <div class="dropdown-list"><a href="power_and_cable.html">Power and Cables</a></div> 
 
           <div class="dropdown-list"><a href="audio.html">Audio</a></div> 
 
          </li> 
 
         </div> 
 
        </ul>

Answer 1

いくつかの問題：

• すでにcheckNavbar.checked == true
• eventが定義されていないことを必要としていたので、checkNavbar
• checkNavbar.checked == falseのためのチェックが満足することはありませんがありますe = event || window.event。それはeでなければなりません。

ドロップダウンをクリックしてコードを実行して閉じることを避けたい場合は、その要素にclickイベントをトラップして、その伝播を停止するのが最も簡単です。そうすれば、ドキュメントレベルのクリックハンドラには決して到着しません。ここで

は修正されたコードです：

function validate(e){ 
 
    var e = e || window.event, // make this works in different browsers 
 
     checkNavbar = document.getElementById("navbar-dropdown-toggle"), 
 
     checkboxNavbar = document.getElementById("checkboxNavbar"); 
 
     
 
    if ([checkNavbar, checkboxNavbar].indexOf(e.target) < 0 && checkNavbar.checked) { 
 
     checkNavbar.checked = false; 
 
     return false; 
 
    } 
 
}; 
 

 
document.addEventListener("click", validate); 
 

 
var storeDropdown = document.getElementById("storeDropdown"); 
 
storeDropdown.addEventListener("click", function(e) { 
 
    e.stopPropagation(); 
 
});

.dropdown-label-navbar { 
 
    height: 55px; 
 
    width: 100%; 
 
    display: block; 
 
    position: absolute; 
 
} 
 
.navbar-dropdown { 
 
    opacity: 0; 
 
    position: absolute; 
 
    margin-left: -999px; 
 
} 
 
.dropdown-menu { 
 
    width: 100%; 
 
    background: white; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 
.navbar-dropdown:checked ~ .dropdown-menu { 
 
    display: block; 
 
    transition: max-height 1s; 
 
    max-height: 300px; 
 
    opacity: 1.0; 
 
    border-top: 1px solid #828282; 
 
    border-bottom: 1px solid #828282; 
 
} 
 
.dropdown-label-navbar { 
 
    height: 25px; 
 
    width: 150px; 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid red; 
 
}

<input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/> 
 
<label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label> 
 

 
<a href="#99" class="main-links">Store</a> 
 
<ul class="dropdown-menu" id="storeDropdown"> 
 
    <div class="entire-block"> 
 
     <div class="dropdown-image-block"> 
 

 
     </div> 
 
     <li class="list-of-dropdown"> 
 
      <div class="dropdown-list"><a href="case-and-protection.html">Cases and Protection</a></div> 
 
      <div class="dropdown-list"><a href="power_and_cable.html">Power and Cables</a></div> 
 
      <div class="dropdown-list"><a href="audio.html">Audio</a></div> 
 
     </li> 
 
    </div> 
 
</ul>

それとも、すべての3つの要素のストップ・バブリング方式を使用することができます。

var checkNavbar = document.getElementById("navbar-dropdown-toggle"), 
 
\t checkboxNavbar = document.getElementById("checkboxNavbar"), 
 
\t storeDropdown = document.getElementById("storeDropdown"); 
 

 
function closeDropDown(){ 
 
    checkNavbar.checked = false; 
 
} 
 

 
function stopBubblingWhenChecked(e) { 
 
    if (checkNavbar.checked) e.stopPropagation(); 
 
} 
 

 
[checkNavbar, checkboxNavbar, storeDropdown].forEach(function(elem) { 
 
    elem.addEventListener("click", stopBubblingWhenChecked); 
 
}); 
 

 
document.addEventListener("click", closeDropDown);

.dropdown-label-navbar { 
 
    height: 55px; 
 
    width: 100%; 
 
    display: block; 
 
    position: absolute; 
 
} 
 
.navbar-dropdown { 
 
    opacity: 0; 
 
    position: absolute; 
 
    margin-left: -999px; 
 
} 
 
.dropdown-menu { 
 
    width: 100%; 
 
    background: white; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 
.navbar-dropdown:checked ~ .dropdown-menu { 
 
    display: block; 
 
    transition: max-height 1s; 
 
    max-height: 300px; 
 
    opacity: 1.0; 
 
    border-top: 1px solid #828282; 
 
    border-bottom: 1px solid #828282; 
 
} 
 
.dropdown-label-navbar { 
 
    height: 25px; 
 
    width: 150px; 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid red; 
 
}

<input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/> 
 
<label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label> 
 

 
<a href="#99" class="main-links">Store</a> 
 
<ul class="dropdown-menu" id="storeDropdown"> 
 
    <div class="entire-block"> 
 
     <div class="dropdown-image-block"> 
 

 
     </div> 
 
     <li class="list-of-dropdown"> 
 
      <div class="dropdown-list"><a href="case-and-protection.html">Cases and Protection</a></div> 
 
      <div class="dropdown-list"><a href="power_and_cable.html">Power and Cables</a></div> 
 
      <div class="dropdown-list"><a href="audio.html">Audio</a></div> 
 
     </li> 
 
    </div> 
 
</ul>