jquery - slideToggle() 无法正常工作

Question

我在页面中添加了 slideToggle() 效果，但它无法正常工作。

$j(".fields_toggle").click(function() {
    $j(this).toggleClass("closed").next('.toggle_container').slideToggle('slow');
});

单击切换触发器使幻灯片内容立即向下滑动然后向上滑动，而无需再次单击它。

<div class="onoffswitch right fields_toggle">
    <input type="checkbox" name="myonoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
    <label class="onoffswitch-label " for="myonoffswitch2"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>

    </label>
</div>
<div class="row toggle_container">
    <input type="text" id="dpd1" value="" class="form-control datepicker" placeholder="Arrival">
    <input type="text" id="dpd2" value="" class="form-control datepicker" placeholder="Departure">
</div>

http://jsfiddle.net/ktsixit/kp533/

这是因为我正在使用 checkbox-radio-switch.css 文件(包含在 ExtendBootstrap 中)。这只是一些 css，可以在复选框上切换外观。

我该如何解决这个问题？

Answer 1

在这里，我让它正常工作。

我给了相关的div 2个id

<div class="onoffswitch right fields_toggle" id="btn_for_toggle">

和

 <div class="row toggle_container" id="form_elements">

在 javascript 部分:

jQuery("#myonoffswitch2").on("click", function () {
    jQuery("#form_elements").toggle("slow");
    jQuery("#btn_for_toggle").toggleClass("closed");
});

查看我的 fiddle