切换和手风琴折叠在一起

Question

我有一个 bootstrap 3 手风琴，我正试图让它与拨动开关一起工作。

目前一切正常，除了如果面板被其他手风琴面板之一折叠时切换开关不会关闭。基本上，我正在寻找在面板打开时打开并在面板折叠时关闭的开关。这样切换就可以模仿手风琴。如果面板展开，只有切换打开，所有其他切换和面板将关闭/折叠。

有谁知道实现这一目标的方法吗？

$("div.panel-heading").on("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;
    
    var checkbox = $(this).find("input[type='checkbox']");
    
    if( !checkbox.prop("checked") ){
        checkbox.prop("checked",true);
    } else {
        checkbox.prop("checked",false);
    }
});

 /*---- Toggle Switches ------*/
.checkbox-switch {

/* border: 0.1em solid #444; */
  border-radius: 20px;
  display: inline-block;
  font-size: 16px;
  width: 2em;
  height: 1em;
 overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  top: 3px;
  left: 0px;
  float: right;
  

}

.checkbox-switch > input {
  display: none;
}

.checkbox-switch > input ~ .checkbox-switch-inner {
  margin-left: -2.5em;
  -webkit-transition: margin-left 0.2s ease;
  -moz-transition: margin-left 0.2s ease;
  -o-transition: margin-left 0.2s ease;
  transition: margin-left 0.2s ease;
}

.checkbox-switch > input:checked ~ .checkbox-switch-inner {
  margin-left: -1.5em;
}

.checkbox-switch > .checkbox-switch-inner {
  display: block;
  width: 8em;
  height: 2em;
  color: #fff;
  overflow: hidden;
}

.checkbox-switch-inner > * {
  display: block;
  float: left;
  height: 2em;
  line-height: 2em;
}

.checkbox-switch-inner > .checkbox-switch-on {
  /* background: #31A354; */
  background: #14aa4b;
  width: 3em;
  padding-left: 1em;
}

.checkbox-switch-inner > .checkbox-switch-off {
  background: #b3b3b3;
  width: 3em;
  padding-right: 1em;
  text-align: right;
}

#ecosystem-collapse .checkbox-switch-inner > .checkbox-switch-on {
 background: #23527C;
}

#reference-collapse .checkbox-switch-inner > .checkbox-switch-on {
 background: #CE691B;
}

.checkbox-switch-inner > .checkbox-switch-handle {
  background: #eee;
  width: 1em;
  height: 1em;
  margin-left: -3.5em;
  border: 0.1em solid #999;
  border-radius: 20px;
}
        
    #dataBox {
 position: absolute;
 background-color: white;
 max-width: 350px;
 margin-left: 10px;
 padding: 5px;
 z-index: 9999;
}

        .panel-header {
        cursor: pointer;
        }
/*---- END Toggle Switches ------*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><div class="panel-heading">
      <h4 class="panel-title">
        
        Collapsible Group 1
          <label for="00" class="tn-headline">TITLE 1</label>
        
 <label class="checkbox-switch" onclick="javascript:showonlyone('nutlayer1');toggleDiv('nutlayer1');"> <!-- The onclick attribute is required by iOS -->
    <input type="checkbox" class="radio tn-switch" id="00" checked="checked"/>
    <span class="checkbox-switch-inner">
      <span class="checkbox-switch-on"></span>
       <span class="checkbox-switch-off"></span>
       <span class="checkbox-switch-handle"></span>
   </span>
 </label>
      </h4>
    </div></a>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><div class="panel-heading">
      <h4 class="panel-title">
        
        Collapsible Group 2
          <label for="01" class="tsin-headline">TITLE 2</label>
    
  
   
 <label class="checkbox-switch" onclick> <!-- The onclick attribute is required by iOS -->
    <input class="radio tsin-switch" type="checkbox" id="01" >
    <span class="checkbox-switch-inner">
      <span class="checkbox-switch-on"></span>
       <span class="checkbox-switch-off"></span>
       <span class="checkbox-switch-handle"></span>
   </span>
 </label>
      </h4>
        </div></a>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><div class="panel-heading">
      <h4 class="panel-title">
        
        Collapsible Group 3<label for="01" class="tsin-headline">TITLE 3</label>
          <label class="checkbox-switch" onclick> <!-- The onclick attribute is required by iOS -->
    <input class="radio tsin-switch" type="checkbox" id="01" >
    <span class="checkbox-switch-inner">
      <span class="checkbox-switch-on"></span>
       <span class="checkbox-switch-off"></span>
       <span class="checkbox-switch-handle"></span>
   </span>
 </label>
      </h4>
    </div></a>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

Answer 1

您需要找到上次单击的面板，因此当单击新面板时，先前的复选框将被清除：

var lastPanel = $("div.panel-heading, #collapse1"); //this is the default panel
$("div.panel-heading").on("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if(lastPanel && target !== lastPanel)
        lastPanel.find("input[type='checkbox']").prop("checked",false);

    if( !checkbox.prop("checked") ){
        checkbox.prop("checked",true);
    } else {
        checkbox.prop("checked",false);
    }
    lastPanel = target;
});

见FIDDLE

Answer 2

示例：https://jsfiddle.net/3yjt4Lah/3/

$("div.panel-heading").on("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    $("#accordion").each(function(){
        var checkbox = $(this).find("input[type='checkbox']");
      checkbox.prop("checked",false);
    })
    var checkbox = $(this).find("input[type='checkbox']");
    if( !checkbox.prop("checked") ){
        checkbox.prop("checked",true);
    } else {
        checkbox.prop("checked",false);
    }
});

切换和手风琴折叠在一起

Toggle & Accordian collapsing together

javascript

jquery

accordion

toggle

twitter-bootstrap-3