Toggle & Accordian рушится вместе

У меня есть аккордеон бутстрапа 3, и я пытаюсь заставить его работать с тумблерами.Toggle & Accordian рушится вместе

В настоящее время все работает должным образом, за исключением того, что переключатели не переключаются в 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>

источник

2016-03-25 Lazerbrains

все, что вам нужно, все присутствует в скрипке, которую вы добавили, то что вы просите дополнительно! не понятно!! – ameenulla0007

Вам нужно обратиться к ранее выбранной панели, поэтому при нажатии новой панели предыдущий флажок может переключаться. – Blindsyde

Все работает ЗА ИСКЛЮЧЕНИЕМ, когда вы открываете вторую панель, а другая открытая панель рушится, тумблер не выключается. Я не уверен, как настроить таргетинг на переключатель, чтобы отключить его, когда панель сбрасывается с другой панели? – Lazerbrains

Пример: 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); 
    } 
});

источник

2016-03-25 17:12:59

Удивительный! Это сделал трюк! Большое вам спасибо за вашу помощь. Я делал это намного сложнее, чем нужно. – Lazerbrains

Вы должны найти, что последняя панель щелкнул, так что, когда новая панель щелкнул предыдущий флажок будет ясно:

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

источник

2016-03-25 17:12:42 Blindsyde

Toggle & Accordian рушится вместе

ответ

Смежные вопросы