Divはこの要素の子をクリックした後に隠す

Question

私は、クリックするとdivを取り除き、アクティブなクラスを適切な親要素に割り当てたスクリプトを書いた。また、divドロップダウンの外側をクリックして閉じると機能が追加されました。残念なことに、任意の要素のドロップダウンディバイダ内をクリックすると、その要素も非表示になります。ドロップダウンの途中のアイテムのクリック可能性が影響を与えないように、これを修正するにはどうすればよいですか？

$(document).click(function() { 
 
\t $("#dropdown").slideUp("fast"); 
 
\t $(".dropdown-parent").removeClass("active"); 
 
}); 
 

 
$(document).on("click", ".dropdown-parent:not(.active)", function(e) { 
 
\t \t e.stopPropagation(); 
 
\t \t $(".dropdown-parent").removeClass("active"); 
 
\t \t $(this).addClass("active"); 
 
\t \t $("#dropdown").slideDown("fast"); 
 
}); 
 

 
$(document).on("click", ".dropdown-parent.active", function() { 
 
\t $("#dropdown").slideToggle("fast"); 
 
\t $(this).removeClass("active"); 
 
});

.active { 
 
background: red; 
 
color: #fff; 
 
} 
 

 
#dropdown { 
 
display: none; 
 
background: black; 
 
height: 400px; 
 
width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="dropdown-parent">test</a> 
 
<a href="#" class="dropdown-parent">test2</a> 
 
<a href="#" class="dropdown-parent">test3</a> 
 
<a href="#" class="dropdown-parent">test4</a> 
 

 
<div id="dropdown" class="container"> 
 
    <a href="#">test in dropdown</a> 
 
    <p style="color: white">test2 in dropdown</p> 
 
</div>

Answer 1

あなたは.container内のクリックの伝播を停止することができます。

$(document).on("click", ".container", function(e) { 
    e.stopPropagation(); 
}); 

$(document).click(function() { 
 
\t $("#dropdown").slideUp("fast"); 
 
\t $(".dropdown-parent").removeClass("active"); 
 
}); 
 

 
$(document).on("click", ".dropdown-parent:not(.active)", function(e) { 
 
\t \t e.stopPropagation(); 
 
\t \t $(".dropdown-parent").removeClass("active"); 
 
\t \t $(this).addClass("active"); 
 
\t \t $("#dropdown").slideDown("fast"); 
 
}); 
 

 
$(document).on("click", ".dropdown-parent.active", function() { 
 
\t $("#dropdown").slideToggle("fast"); 
 
\t $(this).removeClass("active"); 
 
}); 
 

 
$(document).on("click", ".container", function(e) { 
 
    e.stopPropagation(); 
 
});

.active { 
 
background: red; 
 
color: #fff; 
 
} 
 

 
#dropdown { 
 
display: none; 
 
background: black; 
 
height: 400px; 
 
width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="dropdown-parent">test</a> 
 
<a href="#" class="dropdown-parent">test2</a> 
 
<a href="#" class="dropdown-parent">test3</a> 
 
<a href="#" class="dropdown-parent">test4</a> 
 

 
<div id="dropdown" class="container"> 
 
    <a href="#">test in dropdown</a> 
 
    <p style="color: white">test2 in dropdown</p> 
 
</div>