event.stopPropagation(）;行为不符合预期

我阅读了几篇与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()，也没有奏效。