1
Öğe, genişletilmiş öğenin üstüne kaydırmak istediğiniz Yığınlama Akordeonlarını yerleştirdim. Sorun, DOM'daki daha genişletilmiş alt kalemler, aslında genişletilen öğeyi bulmakta sorunlara neden olmaktadır.jQuery Bootstrap İç İçe Aktarılan Akordeonlar: Üst öğe kapalıyken alt öğeleri nasıl daraltılır
Bunu belirten tüm yayınlarda arama yaptım, ancak kodum bunlardan çok farklı görünüyor ve çalışamam.
Başka bir ebeveynin genişletilmesi nedeniyle bir ebeveynin çökmesi durumunda, herhangi bir alt öğe otomatik olarak kapatmama yardımcı olabilir mi?
ÇALIŞMA VERSION İLEGÜNCELLEME KODU:
$(function() {
$('.panel-group').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -6
}, 500);
e.stopPropagation();
}
});
$('.panel-collapse').on('hidden.bs.collapse', function() {
// find the children and close them
$(this).find('.collapse.in').collapse('hide');
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p> </p>
<p> </p>
<div class="panel-group level1" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Item 1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
\t \t \t <div class="panel-group level2" id="accordion1" role="tablist" aria-multiselectable="true">
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading1_1">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse1_1" aria-expanded="true" aria-controls="collapse1_1">
\t \t \t Item 1.1
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse1_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1_1">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading1_2">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse1_2" aria-expanded="true" aria-controls="collapse1_2">
\t \t \t Item 1.2
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse1_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1_2">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t </div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
Item 2
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
\t \t \t <div class="panel-group level2" id="accordion2" role="tablist" aria-multiselectable="true">
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading2_1">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2_1" aria-expanded="true" aria-controls="collapse2_1">
\t \t \t Item 1.1
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse2_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2_1">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading" role="tab" id="heading2_2">
\t \t \t <h4 class="panel-title">
\t \t \t <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2_2" aria-expanded="true" aria-controls="collapse2_2">
\t \t \t Item 1.2
\t \t \t </a>
\t \t \t </h4>
\t \t \t </div>
\t \t \t <div id="collapse2_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2_2">
\t \t \t <div class="panel-body">
\t \t \t \t Lorem ipsum ...
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t </div>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>sorun çoğaltmak için ekli kodu bakınız:
- sonra Öğe 1, Expand Öğe 2, yine daha sonra Madde 1 - nota kaydırma işleri
- Öğeyi genişletme 1.2 - tekrar, kaydırma işlemleri
- Şimdi Öğe 2'yi genişletin - çünkü Öğe 1.2 şimdi daraltılmış Öğe 1 içinde genişletildiğinden, kaydırılan Öğe 1'dir. peşin
sayesinde Justin
Teşekkürler - çok yararlı olur. Bunu denedim, ancak .panel-collapse yerine .panel-group kullanıyordum. Tam kodunuz, gerçek sitemde bazı garip davranışlara neden oldu, ancak son satırdaki bul ('. Collapse.in') kullanılarak düzeltildi. Teşekkürler! – JustinXyn