2016-03-25 9 views
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>

+0

あなたの要件は何でも、あなたが追加したフィドルにはすべてが存在し、それからあなたはさらに何を求めているのですか?不明です! – ameenulla0007

+0

以前に選択したパネルを参照する必要があるため、新しいパネルをクリックすると前のチェックボックスがオフに切り替わります。 – Blindsyde

+0

2つ目のパネルを開いてもう1つの開いたパネルが崩れても、トグルスイッチがオフにならない限り、すべてが機能しています。パネルが別のパネルから折りたたまれているときにトグルをオフにする方法をわかりませんか? – Lazerbrains

答えて

0

例を参照してください。 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); 
    } 
}); 
+0

驚くばかり!それはトリックでした!手伝ってくれてどうもありがとう。私はこの方法を必要以上に困難にしていました。 – Lazerbrains

0

新しいパネルがクリックされたときに、前のチェックボックスがクリアされ、クリックされた:

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