複数のdivの同じクラスを持つ要素の外側をクリックしたときに特定のdivを非表示にする方法

Question

同じクラス名を持つdivの非表示にするコードスニペットがあります。同じクラス名とイベントを持つ複数のdivがactionLinksクラスの外でトリガーされる必要があります。しかし、私は少しこれを行う方法を混同しています。私を導くことができますか？それが含まれているかどうかを

$(document).on("click", ".actionLinks", function() { 
 
    $('.mainAction').hide(); 
 
    $(this).prev('.mainAction').show(); 
 
}); 
 

 
$(document).not(".actionLinks").on("click", function() { 
 
    $('.mainAction').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="mainAction" style="display: none;"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link one</a> 
 
</div> 
 
<div class="mainAction" style="display: none;"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link two</a> 
 
</div> 
 
<div class="mainAction" style="display: none;"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link three</a> 
 
</div> 
 
<div class="mainAction" style="display: none;"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link four</a> 
 
</div> 
 
<div class="mainAction" style="display: none;"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link five</a> 
 
</div> 
 
<div class="mainAction" style="display: none;"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link six</a> 
 
</div> 
 
<div class="mainAction" style="display: none;"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link seven</a> 
 
</div> 
 

 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p>

Answer 1

間の意味的なリンクを有するという利点があります。下記の確認あなたは上記のスニペットでそれを実装することができ、

$(document).on("click", "body", function(event) { 
 
    if (!$('.actionLinks a').is(event.target) && $('.actionLinks a').has(event.target).length === 0) { 
 
    $('.mainAction').hide(); 
 
    $(event.target).show().closest('.mainAction').show(); 
 
    } else { 
 
    $('.mainAction').hide(); 
 
    $(event.target).closest('.actionLinks').prev('.mainAction').show(); 
 
    } 
 
});

body { 
 
    font: 13px Verdana; 
 
} 
 

 
.mainAction { 
 
    display: none; 
 
    background: red; 
 
    color: #fff; 
 
    margin-bottom: 5px; 
 
} 
 

 
.mainAction a { 
 
    color: #fff; 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 

 
.actionLinks a { 
 
    background: blue; 
 
    color: #fff; 
 
    margin-bottom: 5px; 
 
    display: inline-block; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="mainAction"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link one</a> 
 
</div> 
 
<div class="mainAction"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link two</a> 
 
</div> 
 
<div class="mainAction"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link three</a> 
 
</div> 
 
<div class="mainAction"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link four</a> 
 
</div> 
 
<div class="mainAction"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link five</a> 
 
</div> 
 
<div class="mainAction"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link six</a> 
 
</div> 
 
<div class="mainAction"> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#">Link seven</a> 
 
</div> 
 

 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p>

Answer 2

代わりの$(document).not(".actionLinks").on(...)は、あなたはすべてのclickイベントをキャッチし、チェックするためにボディに、次のように

$(':not(div.actionLinks)').click(function(){ 
    $('div.mainAction').hide(); 
}); 

Answer 3

追加clickイベントを同じアクションを行うことができますクラス。

document.body.addEventListener('click', (e) => { 
    if(!e.target.classList.contains("mainAction")) { 
     hideElem(openedMainActionElement); 
    } 
}); 

Answer 4

これは、IDのへのリンクと:targetセレクタを使ってJavaScriptせずにこれを行うことが可能です。これは、あなたがevent.targetを試すことができますaタグとターゲットdiv

.mainAction { 
 
    display: none; 
 
} 
 

 
.mainAction:target { 
 
    display: block; 
 
}

<div id="actions1" class="mainAction"> 
 
    <h3>Actions 1</h3> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#actions1">Link one</a> 
 
</div> 
 
<div id="actions2" class="mainAction"> 
 
    <h3>Actions 2</h3> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#actions2">Link two</a> 
 
</div> 
 
<div id="actions3" class="mainAction"> 
 
    <h3>Actions 3</h3> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#actions3">Link three</a> 
 
</div> 
 
<div id="actions4" class="mainAction"> 
 
    <h3>Actions 4</h3> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#actions4">Link four</a> 
 
</div> 
 
<div id="actions5" class="mainAction"> 
 
    <h3>Actions 5</h3> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#actions5">Link five</a> 
 
</div> 
 
<div id="actions6" class="mainAction"> 
 
    <h3>Actions 6</h3> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#actions6">Link six</a> 
 
</div> 
 
<div id="actions7" class="mainAction"> 
 
    <h3>Actions 7</h3> 
 
    <a href="#">Action 1</a> 
 
    <a href="#">Action 2</a> 
 
    <a href="#">Action 3</a> 
 
</div> 
 
<div class="actionLinks"> 
 
    <a href="#actions7">Link seven</a> 
 
</div> 
 

 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p>