Toggle 和 Accordion 折叠在一起答案

【问题标题】：Toggle & Accordian collapsing togetherToggle 和 Accordion 折叠在一起
【发布时间】：2016-07-13 11:15:01
【问题描述】：

我有一个 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>

【问题讨论】：

无论您的要求是什么，您添加的小提琴中都有所有内容，那么您还要求什么！！不清楚！！
您需要参考之前选择的面板，以便在单击新面板时之前的复选框可以关闭。
一切正常，除了当您打开第二个面板并且另一个打开的面板折叠时，切换开关不会关闭。我不确定当一个面板从另一个面板折叠时如何关闭切换？

标签： javascript jquery twitter-bootstrap-3 toggle accordion

【解决方案1】：

例如：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);
    }
});

【讨论】：

太棒了！那成功了！非常感谢你的帮助。我让这种方式变得比它需要的更困难。

【解决方案2】：

你需要找到最后一个被点击的面板，所以当一个新的面板被点击时，前一个复选框会被清除：

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

【讨论】：