jquery - Jquery click 影响的 div 超出了应有的范围

Question

得到了下拉文本区域的这段代码。目标是在单击复选框时让 div.card 显示/隐藏，这是可行的，但是单击 div.card 本身会使其隐藏，我该如何防止这种情况发生？

jQuery看起来像这样

$('.options .checkbox').click(function(){ 
    $('.options .card').toggleClass("hidden").toggleClass("show");
});

HTML 看起来像这样

<label>
Label description
<strong>
    + € 0,50
</strong>
<input class="checkbox" type="checkbox">
    <div class="card hidden">
        <textarea>
        </textarea>
    </div>
</label>

Answer 1

您可以防止单击事件冒泡到父级：

$('.card').click(function(e) {
    e.stopPropagation()
});

或者，您可以验证目标元素是否真的是您所追求的元素：

$('.options .checkbox').click(function(e) {
    if (!$(e.target).hasClass('checkbox')) return false; 

    $('.options .card').toggleClass("hidden").toggleClass("show");
});