関連するいくつかの記事を読みましevent.stopPropagation();
たが、提供された解決策はどれもうまくいきませんでした。基本的に私が持っているのは、デフォルトですべての要素が折りたたまれたアコーディオン ウィジェットです。各要素ヘッダー (dt タグ) にもチェックボックスがあります。チェックボックスをクリックしても、アコーディオンがトリガーされて要素が展開されることはありません。
<dt data-toggle="collapse">
<span class="subscribe-checkbox"><button type="button" class="btn toggle-btn" data-toggle="button"></button></span>
</dt>
<dd>
<p>Accordion content...</p>
</dd>
スパン (チェックボックスとして機能する必要があります) をクリックすると、それに「チェック済み」のクラスが追加されます。ただし、アコーディオン要素 (dd タグ) も展開します。私がjQueryでやっていることは次のとおりです。
$('.accordion-group .btn.toggle-btn').click(function (event) {
event.stopPropagation();
});
アコーディオンのコンテンツは表示されませんが (これは良いことです)、<span>
要素はクラスも変更されないため、「チェック済み」にはなりません。私も試してみました.live()
が、どちらもうまくいきませんでした。