单击时引导开关，隐藏 div答案

【问题标题】：Bootstrap switch when clicked, hide the div单击时引导开关，隐藏 div
【发布时间】：2015-06-27 00:51:24
【问题描述】：

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

【问题讨论】：

标签： jquery twitter-bootstrap switch-statement

【解决方案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 不会被解雇，这可能是一个错误！因此，您需要使用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();
         }
     });
});

【讨论】：

随时朋友.. 快乐编码.. :)
我还有另一个问题。
告诉我！！那是什么？？
它是这样的。我想将 div 不透明度设置为 0.3，并且我想在切换开关后使其处于非活动状态。
让我们continue this discussion in chat.

【解决方案2】：

你也可以单独使用 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>

【讨论】：

【解决方案3】：

您可以通过使用引导程序switch 的switchChange-Event 来做到这一点。

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

$(div) 是你想要隐藏/显示的 div。

【讨论】：