セットに含まれていないすべてのクリックをキャッチ

Question

クリック時に表示されるナビゲーションドロップダウンがあります。ただし、純粋なCSS機能を使用するには、リンクをもう一度クリックしてサブメニューを閉じる必要があります。

私は、サブメニュー内にないクリックがそれを閉じるように変更したいと思います。

私はこのような何かを試してみましたが、無駄にしました：

$('*:not(.submenu > li > a)').click(function() { 
    $('nav .dropdown input').removeAttr('checked'); 
    console.log('clicked outside sub-menu'); 
}); 

これは、すべてのクリックを登録し、でも$('nav .dropdown input').removeAttr('checked');ラインは、メニューを非表示にする作業を行い、それが呼ばれることを意味.submenu > li > aと一致するものメニューを開こうとしているときでも、メニューが開かないことがあります。

CSSドロップダウンは、チェックボックス入力を介して機能します。ここでCSSは役に立ちますが、私の問題はJavascriptにあります。なぜなら、CSSの機能はうまく機能するからです。ここで

はフィドルで、CSSは以下の通りです：

$('body').on('click', ':not(.submenu > li > a)', function() { 
    $('nav .dropdown input').removeAttr('checked'); 
    console.log('clicked outside sub-menu'); 
}); 

あなたがトンを追加していないその方法：https://jsfiddle.net/z3yj7pLs/

ul.dropdown { 
    position:fixed; 
    top:30px; 
    width:100%; 
    height:3em; 
    margin:0; 
    padding:0 10px; 
    color:#eee; 
} 

ul.dropdown > li{ 
    float:left; 
    list-style-type:none; 
    position:relative; 
} 

ul.dropdown label{ 
    position:relative; 
    display:block; 
    transition:background 0.3s; 
    cursor:pointer; 

    bottom: -2px; 
    left: -10px; 
} 

ul.dropdown label:after{ 
    content:""; 
    position:absolute; 
    display:block; 
    top:50%; 
    right:5px; 
    width:0; 
    height:0; 
    border-top:4px solid rgba(255,255,255,.5); 
    border-bottom:0 solid rgba(255,255,255,.5); 
    border-left:4px solid transparent; 
    border-right:4px solid transparent; 
    transition:border-bottom .1s, border-top .1s .1s; 
} 

ul.dropdown label:hover, 
ul.dropdown input:checked ~ label{ 

} 

ul.dropdown input:checked ~ label:after{ 
    border-top:0 solid rgba(255,255,255,.5); 
    border-bottom:4px solid rgba(255,255,255,.5); 
    transition:border-top .1s, border-bottom .1s .1s; 
} 

/*hide the inputs*/ 
ul.dropdown input{display:none} 

/*show the second levele menu of the selected voice*/ 
ul.dropdown input:checked ~ ul.submenu{ 
    max-height:300px; 
    transition:max-height 0.5s ease-in; 
} 

/*style for the second level menu*/ 
ul.dropdown ul.submenu{ 
    max-height:0; 
    padding:0; 
    overflow:hidden; 
    list-style-type:none; 
    background:#444; 
    box-shadow:0 0 1px rgba(0,0,0,.3); 
    transition:max-height 0.5s ease-out; 
    position:absolute; 
    min-width:100%; 
} 

ul.dropdown ul.submenu li a{ 
    display:block; 
    padding:12px; 
    color:#ddd; 
    text-decoration:none; 
    box-shadow:0 -1px rgba(0,0,0,.5) inset; 
    transition:background .3s; 
    white-space:nowrap; 
} 

ul.dropdown ul.submenu li a:hover{ 
    background:rgba(0,0,0,.3); 
} 

Answer 1

documentのクリックに耳を傾け、[OK]をクリックしますが、ここでdropdown

$(document).click(function(event) { 
    if ($(event.toElement).parents('.dropdown').length > 0) { 
     console.log('Clicked inside the dropdown area'); 
    } else { 
     console.log('Clicked outside the dropdown area'); 
    } 
}); 

内部ではなかったかどうかを確認することができた場合は作業抜粋です：

$(document).click(function(event) { 
 
    if ($(event.toElement).parents('.dropdown').length > 0) { 
 
    \t  console.log('Clicked inside the dropdown area'); 
 
    } else { 
 
     console.log('Clicked outside the dropdown area'); 
 
    } 
 
});

body { 
 
    background: black; 
 
} 
 
ul.dropdown { 
 
    position: fixed; 
 
    top: 30px; 
 
    width: 100%; 
 
    height: 3em; 
 
    margin: 0; 
 
    padding: 0 10px; 
 
    color: #eee; 
 
} 
 

 
ul.dropdown > li { 
 
    float: left; 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 

 
ul.dropdown label { 
 
    position: relative; 
 
    display: block; 
 
    transition: background 0.3s; 
 
    cursor: pointer; 
 
    bottom: -2px; 
 
    left: -10px; 
 
} 
 

 
ul.dropdown label:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    top: 50%; 
 
    right: 5px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 4px solid rgba(255, 255, 255, .5); 
 
    border-bottom: 0 solid rgba(255, 255, 255, .5); 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    transition: border-bottom .1s, border-top .1s .1s; 
 
} 
 

 
ul.dropdown label:hover, 
 
ul.dropdown input:checked ~ label {} 
 

 
ul.dropdown input:checked ~ label:after { 
 
    border-top: 0 solid rgba(255, 255, 255, .5); 
 
    border-bottom: 4px solid rgba(255, 255, 255, .5); 
 
    transition: border-top .1s, border-bottom .1s .1s; 
 
} 
 

 

 
/*hide the inputs*/ 
 

 
ul.dropdown input { 
 
    display: none 
 
} 
 

 

 
/*show the second levele menu of the selected voice*/ 
 

 
ul.dropdown input:checked ~ ul.submenu { 
 
    max-height: 300px; 
 
    transition: max-height 0.5s ease-in; 
 
} 
 

 

 
/*style for the second level menu*/ 
 

 
ul.dropdown ul.submenu { 
 
    max-height: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    list-style-type: none; 
 
    background: #444; 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, .3); 
 
    transition: max-height 0.5s ease-out; 
 
    position: absolute; 
 
    min-width: 100%; 
 
} 
 

 
ul.dropdown ul.submenu li a { 
 
    display: block; 
 
    padding: 12px; 
 
    color: #ddd; 
 
    text-decoration: none; 
 
    box-shadow: 0 -1px rgba(0, 0, 0, .5) inset; 
 
    transition: background .3s; 
 
    white-space: nowrap; 
 
} 
 

 
ul.dropdown ul.submenu li a:hover { 
 
    background: rgba(0, 0, 0, .3); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown"> 
 
    <li> 
 
    <input id="nav-dropdown-check" type="checkbox" name="menu" /> 
 
    <label for="nav-dropdown-check"><a class="nav-imitation">More</a></label> 
 
    <ul class="submenu"> 
 
     <li><a href="#">Sotto menu 1</a></li> 
 
     <li><a href="#">Sotto menu 2</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

このタスクのためのイベントの委任を使用する方が良いだろうあなたのメニューへのクリックを無視するだけのDOMへのイベントハンドラ - あなたは、 '：not（）'セレクタを少し調整するか、イベントハンドラでJSを使用する必要があります（例えば、if (!$(this).parents('.submenu').length) { ...collapse }