javascript - SlideToggle Specific Div onClick of Checkbox 还没有起作用？

Question

跟随这个 fiddle http://jsfiddle.net/swQLg/10/尚未使用此设置 http://jsfiddle.net/u56Zv/

HTML:

<div class="PanelWhen" id="PanelWhen">
        That
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn whenBtn">
    <input type="checkbox" id="whenBtn"> When
  </label>
</div>

CSS:

#PanelWhen {
  display: none;
}

JS:

<script>
$(document).ready(function () {
    $("#whenBtn").on('click', function () {
        var $when = $(this).next("#PanelWhen");
        $when.slideToggle();
        $("#PanelWhen").not($when).slideUp();
    });
});
</script>

Answer 1

您正在使用 jQuery，因此您必须确保在 fiddle 中包含该库。

其次，.previous 方法搜索同级元素——它不会在 DOM 树中的任何地方查找。请注意，在第一个示例中，它查找 next('.ans') 元素——它工作正常，因为所有元素都是兄弟元素。

在您的示例中，您可能只想将 $when var 的范围限定为您想要显示的特定元素，但是如果您希望在整个站点中获得可重复的结果，您应该考虑使用一些定位方法(即 .parent, .children, .siblings, .next, .previous 等)

这是你的新 fiddle :

http://jsfiddle.net/u56Zv/2/