web-dev-qa-db-fra.com

Bootstrap collapse - aller au-dessus de l'élément ouvert?

J'utilise la fonction bootstrap collapse, mais lorsque j'ouvre un élément qui contient beaucoup de contenu, puis que j'ouvre l'élément suivant, il saute vers le bas et ne va pas au sommet de l'élément ouvert. J'ai essayé d'utiliser le plugin scrollto comme indiqué ci-dessous, mais cela ne fonctionne pas:

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>

Des idées?

jquerytwitter-bootstrapscrolltocollapse
15
user1937021

J'ai scrollto travailler avec bootstrap collapse mais le code est pour WordPress. J'ai apporté votre contenu et ça marche. Bootstrap Collapse a un événement affiché et vous devez ensuite connaître la hauteur du contenu à faire défiler. 

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

Vous aurez peut-être besoin de le modifier un peu, mais cela devrait fonctionner.

9
ellenmva

Le nom de l'événement a changé dans Bootstrap 3, par conséquent, @ bboymaanu ne fonctionnera pas comme indiqué. Il convient plutôt d'utiliser l'événement 'shown.bs.collapse'.

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

Les nouveaux événements sont documentés ici .

13
pIxelnate

Voici une solution construite sur d'autres suggestions qui:

  • fonctionne également pour les accordéons incorporés 
  • défile de sorte que l'en-tête est également affiché 
  • seulement si pas déjà à l'écran 
  • anime aussi

Code:

$('#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');
    }
  }
});
5
Neromancer
$(".accordion-body").on("shown", function () {
var id = $(this).attr('id');
$('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000);
});
});

Exemple simple. Le ".top + -50" est Minus 50px à partir du haut de l’élément, ce qui permet un rembourrage en haut.

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

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

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

});
2
Kinjal Gohil

Vous pouvez essayer ceci:

J'ai utilisé ce qui suit, fonctionne comme un charme:

$("#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;
}

Cela donne aussi un effet de rebond et ça me plait. 

0
TheAshwaniK