Bootstrap点击时切换，隐藏div

Question

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

创建了一个 bootstrap 开关

我在开关旁边有一个 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();
  }
});

更新-

根据给出的答案HERE switchChange will not be fired, it might be a bug!! So instead you need to use switchChange.bootstrapSwitch as below and here is the 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

您可以使用 bootstrap switch 的 switchChange-Event 来做到这一点。

$('#change-color-switch').on('switchChange', function (e, data) {
  $(div).toggle(); 
});

$(div) 当然 div 你想要 hide/show。

Answer 3

您也可以单独使用 jquery。

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

<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>

Bootstrap点击时切换，隐藏div

Bootstrap switch when clicked, hide the div

jquery

switch-statement

twitter-bootstrap