0
私はブートストラップ3のアコーディオンを持っています。私はそれをトグルスイッチで動作させようとしています。Toggle＆Accordian collapsing together
現在のところ、パネルが他のアコーディオンパネルのいずれかで折りたたまれている場合、トグルがOFFに切り替わらない以外は、すべて動作します。基本的には、パネルが開いているときに切り替えるトグルを探していて、パネルが折りたたまれているときにはトグルします。トグルがアコーディオンを模倣するように。パネルが展開され、他のすべてのトグルとパネルがオフ/折りたたまれている場合は、トグルだけがオンになります。
誰かがこれを起こす方法を知っていますか？あなたはその最後のパネルを見つける必要があり
$("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 {
\t background: #23527C;
}
#reference-collapse .checkbox-switch-inner > .checkbox-switch-on {
\t 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 {
\t position: absolute;
\t background-color: white;
\t max-width: 350px;
\t margin-left: 10px;
\t padding: 5px;
\t 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>
\t
\t <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>
\t <span class="checkbox-switch-off"></span>
\t <span class="checkbox-switch-handle"></span>
\t </span>
\t </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>
\t
\t \t
\t <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>
\t <span class="checkbox-switch-off"></span>
\t <span class="checkbox-switch-handle"></span>
\t </span>
\t </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>
\t <span class="checkbox-switch-off"></span>
\t <span class="checkbox-switch-handle"></span>
\t </span>
\t </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>
あなたの要件は何でも、あなたが追加したフィドルにはすべてが存在し、それからあなたはさらに何を求めているのですか？不明です！ – ameenulla0007
以前に選択したパネルを参照する必要があるため、新しいパネルをクリックすると前のチェックボックスがオフに切り替わります。 – Blindsyde
2つ目のパネルを開いてもう1つの開いたパネルが崩れても、トグルスイッチがオフにならない限り、すべてが機能しています。パネルが別のパネルから折りたたまれているときにトグルをオフにする方法をわかりませんか？ – Lazerbrains