0

ドロップダウンテキストエリア用のこのコードを取得しました。目標は、チェックボックスがクリックされたときに 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>
4

1 に答える 1

2

クリック イベントが親にバブリングしないようにすることができます。

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

または、ターゲット要素が本当に目的のものであることを確認できます。

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

    $('.options .card').toggleClass("hidden").toggleClass("show");
});
于 2012-10-17T08:29:06.167 に答える