Question

我已经从http://www.zamanak.ir/themes/zamanak/bootstrap-switch-3.0/

创建了一个自举开关

我在开关旁边有一个div，所以当开关打开时我希望div出现，当它关闭时我希望div消失。

我该怎么做？

<!-- Switch -->
<link href="css/bootstrap-switch.css" rel="stylesheet">

<span class="switch-box">
            <input type="checkbox" data-on-text="<span class='glyphicon glyphicon-ok'></span>" data-off-text="<span class='glyphicon glyphicon-remove'></span>" checked data-size="mini" id="change-color-switch" checked data-on-color="success" data-off-color="danger" class="ck-in a1">
            </span>
            <p class="conf-dy a">monday</p>

<script src="js/bootstrap-switch.js"></script>

<script>$('#change-color-switch').bootstrapSwitch('onColor','success');$('#change-color-switch').bootstrapSwitch('offColor','danger');</script>

Answer 1

试试此代码

$('#change-color-switch').on('switchChange', function (e, data) {
  var state=$(this).bootstrapSwitch('state');//returns true or false
  if(state)
  {
       $("#yourdivID").show();
  }
  else
  {
       $("#yourdivID").hide();
  }
});

<强> UPDATE -

根据给出的答案 HERE switchChange不会被解雇，这可能是一个错误!!因此，您需要使用switchChange.bootstrapSwitch，如下所示，这里是 DEMO

$("#change-color-switch").bootstrapSwitch();
$(document).ready(function(){
    $('#change-color-switch').on('switchChange.bootstrapSwitch', function (e, data) {
         var state=$(this).bootstrapSwitch('state');//returns true or false
         if(state){
             $(".conf-dy").show();
         }
         else{
             $(".conf-dy").hide();
         }
     });
});

Answer 2

您可以使用引导程序switchChange-Event的{{1}}来执行此操作。

switch

$('#change-color-switch').on('switchChange', function (e, data) { $(div).toggle(); });是想要隐藏/显示的div。

Answer 3

您也可以单独使用jquery来完成。

＆＃13;

    $('#checkbox').on('change',function(){
        $('.main')[$(this).prop('checked') ? 'fadeIn':'fadeOut']()
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox">
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta sit iusto omnis vel et ut assumenda consequatur dolorum alias facere consectetur odio minima fugiat perspiciatis numquam ipsam optio dolorem minus!
    </div>

＆＃13;

单击Bootstrap开关，隐藏div

3 个答案: