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");
});