Question

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

目前一切正常，但如果面板被其他一个手风琴面板折叠，则切换不会关闭。基本上我正在寻找切换面板打开时切换的切换，并在面板折叠时切换。所以乞丐模仿手风琴。如果面板展开，则仅打开切换，并且所有其他切换和面板将关闭/折叠。

有没有人知道如何实现这一目标？

＆＃13;

$("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);
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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);
    }
});

切换＆amp;手风琴折叠在一起

2 个答案: