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

在这里，我得到了正确的工作。

我向相关id

提供了2 divs

<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

Answer 2

嗨我用fiddle

得到了这么远

我跟踪：

var on = true;

我也参与了变更事件，因为它似乎已经过click - ＆gt; change - ＆gt; click

$j(".fields_toggle").on('change', function (e) {
     console.log(2);   
     e.preventDefault();
    on = !on;
});

我认为这可以满足您的需求？

slideToggle（）无法正常工作

2 个答案: