Sự sụp đổ của Bootstrap - lên đầu mục mở?

Question

Tôi đang sử dụng chức năng thu gọn bootstrap, nhưng khi tôi mở một phần tử có nhiều nội dung, sau đó mở phần tử tiếp theo, nó nhảy xuống và không đi lên đầu phần tử mở. Tôi đã thử sử dụng plugin scrollto như hình dưới đây nhưng nó không hoạt động:

JS:

$(function(){ 
    $('a.accordion-toggle').click(function(){ 
     $.scrollTo(this, 500);            
    }) 
}); 

HTML:

<div class="accordion" id="accordion2"> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse1">Austria</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
     <ul id="collapse1" class="member_list accordion-body collapse row"> 
      <li class="accordion-inner pull-left span4"> 
       <a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101">Filmladen</a> 
       <span> Michael Stejskal</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101" title="Filmladen" ><img src="http://dev.europa-distribution.org/assets/logos_film_laden-570x190.png" alt="Filmladen" ></a> 
      </li> 
      <li class="accordion-inner pull-left span4"> 
       <a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194">Polyfilm</a> 
       <span> Hans Koenig</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194" title="Polyfilm" ><img src="http://dev.europa-distribution.org/assets/logos_polyfilm-570x190.png" alt="Polyfilm" ></a> 
      </li> 
      <li class="accordion-inner pull-left span4"> 
       <a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228">Stadtkino Filmverleih</a> 
       <span> Claus Philipp</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228" title="Stadtkino Filmverleih" ><img src="http://dev.europa-distribution.org/assets/logos_stadtkino_filmverleih-570x190.png" alt="Stadtkino Filmverleih" ></a> 
      </li> 
     </ul> 
    </div> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse2">Belgium</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
     <ul id="collapse2" class="member_list accordion-body collapse row"> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6">ABC</a><span> Nicolaine Den Breejen</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6" title="ABC" ><img src="http://dev.europa-distribution.org/assets/logos_genci_kino_abc-570x190.png" alt="Genci kino abc" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61">Cineart-Cinelibre</a><span> Eliane du Bois &amp; Stephan de Potter</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61" title="Cineart-Cinelibre" ><img src="http://dev.europa-distribution.org/assets/logos_cineart-570x190.png" alt="Cineart" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127">Imagine Film Distribution</a><span> Christian Thomas &amp; Tinne Bral</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127" title="Imagine Film Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_imagine-570x190.png" alt="Imagine" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214">Le Parc Distribution</a><span> Jean-Pierre Pécasse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214" title="Le Parc Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_le_parc-570x190.png" alt="le Parc distribution" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145">Lumière</a><span> Jan de Clerq &amp; Annemie Degryse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145" title="Lumière" ><img src="http://dev.europa-distribution.org/assets/logos_lumiere-570x190.png" alt="logos_lumiere" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383">O’Brother</a><span> Olivier Bronckart</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383" title="O’Brother" ><img src="http://dev.europa-distribution.org/assets/logos_obrother_distribution-570x190.png" alt="obrother distribution" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185">Paradiso Filmed Entertainment</a><span> Olivier Mortagne</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185" title="Paradiso Filmed Entertainment" ><img src="http://dev.europa-distribution.org/assets/logos_paradiso-570x190.png" alt="Paradiso Films" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529">U-Dream</a><span> Stephanie Van den Berge</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529" title="U-Dream" ><img src="http://dev.europa-distribution.org/assets/logos_udream-570x190.png" alt="uDream" ></a></li>         
     </ul> 
    </div> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">Bulgaria</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
     <ul id="collapse3" class="member_list accordion-body collapse row"> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337">Artfest</a><span> Stefan Kitanov &amp; Mira Staleva</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337" title="Artfest" ><img src="http://dev.europa-distribution.org/assets/logos_artfest-570x190.png" alt="Art Fest" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302">Pro Films</a><span> Emil Simeonov</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302" title="Pro Films" ><img src="http://dev.europa-distribution.org/assets/logos_pro_films-570x190.png" alt="Pro Films" ></a></li>          
     </ul> 
    </div> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Canada</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
    <ul id="collapse4" class="member_list accordion-body collapse row"> 
     <li class="accordion-inner pull-left span4">Metropole Films<span> Charles Tremblay</span><img src="http://dev.europa-distribution.org/assets/logos_metropole_film_distribution-570x190.png" alt="métropole Films Distribution" ></li> 
    </ul> 
</div> 

Bất kỳ ý tưởng?

Answer 1

Tôi có scrollto làm việc với thu gọn bootstrap nhưng mã dành cho WordPress. Tôi mang nội dung của bạn và nó hoạt động. Bootstrap Collapse có một sự kiện được hiển thị và sau đó bạn cần biết chiều cao của nội dung để cuộn lên.

$(".accordion-body").on("shown", function() { 
    var selected = $(this); 
    var collapseh = $(".collapse .in").height(); 
    $.scrollTo(selected, 500, { 
     offset: -(collapseh) 
    }); 
}); 

Bạn có thể cần chỉnh sửa một chút nhưng nó sẽ hoạt động.

Answer 2

Bạn có thể thử này:

tôi đã sử dụng những điều sau đây, hoạt động như một nét duyên dáng:

$("#accordion2").bind('shown', function() { 
     var active=$("#accordion_univlist .in").attr('id'); 
     scrollhere('#'+active); 
     $('.closebutton-right').hide(); 
}); 

$('.accordion-heading').click(function() { 
    // Do something if you want to do on click else ignore this handler. 
} 

function scrollhere(destination){ 
    var stop = $(destination).offset().top - 80; 
    var delay = 1000; 
    $('body,html').animate({scrollTop: stop}, delay); 
    return false; 
} 

Nó cũng cung cấp cho một hiệu ứng nảy, và tôi thích nó.

Answer 3

Tên sự kiện đã thay đổi trong Bootstrap 3, vì vậy @ bboymaanu sẽ không hoạt động như được hiển thị. Thay vào đó, nó sẽ sử dụng sự kiện 'shown.bs.collapse'.

$(".accordion-body").on("shown.bs.collapse", function() { 
    var selected = $(this); 
    var collapseh = $(".collapse.in").height(); 
    $.scrollTo(selected, 500, { 
     offset: -(collapseh) 
    }); 
}); 

Sự kiện mới là documented here.

Answer 4

$(".accordion-body").on("shown", function() { 
var id = $(this).attr('id'); 
$('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000); 
}); 
}); 

Ví dụ đơn giản. Các ".top + -50" là Minus 50px từ phía trên của phần tử cho phép một số padding ở đầu trang.

Answer 5

Dưới đây là một giải pháp được xây dựng trên những người khác gợi ý đó:

• cũng làm việc cho accordians nhúng
• cuộn để tiêu đề cũng được hiển thị
• chỉ nếu không đã có trên màn hình
• sinh động cũng

Mã:

$('#accordion').on('shown.bs.collapse', function (e) { 

    // Validate this panel belongs to this accordian, and not an embedded one 
    var actualAccordianId = $('a[href="#' + $(e.target).attr('id') + '"').data('parent'); 
    var targetAccordianId = '#' + $(this).attr('id'); 
    if (actualAccordianId !== targetAccordianId) return; 

    var clickedHeader = $(this).find('.panel > .collapse.in').closest('.panel').find('.panel-heading'); 
    var offset = clickedHeader.offset(); 
    var top = $(window).scrollTop(); 
    if(offset) { 
    var topOfHeader = offset.top; 
    if(topOfHeader < top) { 
     $('html,body').animate({ scrollTop: topOfHeader}, 100, 'swing'); 
    } 
    } 
}); 

Answer 6

$('#accordion').on('shown.bs.collapse', function() { 

    var panel = $(this).find('.in'); 

    $('html, body').animate({ 
     scrollTop: panel.offset().top 
    }, 500); 

});