Bootstrap Collapse accordéon sur hover

Je suis en utilisant Twitter Bootstrap "Effondrement" plug-in dans un projet que je suis en train de travailler sur. J'ai un simple accordéon (le programme d'installation selon les documents), mais je veux modifier la valeur par défaut de la fonctionnalité de sur cliquez sur à la sur le vol stationnaire événement.

Quelqu'un peut confirmer la meilleure façon d'atteindre cet objectif?

source d'informationauteur Sheixt

  1. 9

    Vous pouvez copier la grille de données de l'api directement à partir de l'plugins script et de le tordre pour parvenir à l'passez fonctionnalité. Vous pouvez alors la placer à l'intérieur de votre propre script.js fichier et de cibler les réductible vous voulez modifiés pour s'ouvrir sur le vol stationnaire au lieu de sur cliquez sur. Essayez ceci par exemple:

    JS

    $(function() {
    $('#accordion2').on('mouseenter.collapse.data-api', '[data-toggle=collapse]', function(e) {
        var $this = $(this),
            href, target = $this.attr('data-target') || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
            ,
            option = $(target).data('collapse') ? 'show' : $this.data()
            $(target).collapse(option)
    })
})

    C'est une copie directe des données de l'api bloc trouvé sur le plugin, j'ai juste remplacé le click événement avec mouseenter et aussi la collapse option, changé show à la place.

    Démo: http://jsfiddle.net/um2q2/1/

  2. 10

    J'ai atteint le hover de la fonctionnalité tout en conservant 'clickability" assez facilement:

    jQuery(".pointer").hover(
    function(){
        var thisdiv = jQuery(this).attr("data-target")
        jQuery(thisdiv).collapse("show");
    },
    function(){
        var thisdiv = jQuery(this).attr("data-target")
        jQuery(thisdiv).collapse("hide");
    }
);

    J'étais déjà en utilisant les attributs data -, donc je l'ai gardé et utilisé ici pour déclencher le droit divs. "pointeur" est une catégorie sur mon basculer des liens, de sorte que vous pouvez l'adapter à ce que vous avez besoin.

  3. 4

    1. Ajouter le script suivant

      $( ".hoverExpand" ).hover(
    function() {
        if (! $(this).hasClass('collapsing') && 
            $(this).hasClass('collapsed')) {
                $( this ).click();
        }
    }, function() {
        if  (! $(this).hasClass('collapsing') || 
             ! $(this).hasClass('collapsed')) {
                $( this ).click();
        }
    }
);

    2. Ajouter hoverExpand (ou ce que vous voulez l'appeler) de l'élément. Voir l'exemple ci-dessous

      <a class="hoverExpand" data-toggle="collapse" data-parent="#accordion" 
   href="#collapseOne">A plane that flies below water</a>
  4. 4

    mettre à travailler pour bootstrap3 j'ai apporté quelques modifications

    $(function() {
    $(document).on('mouseenter.collapse', '[data-toggle=collapse]', function(e) {
        var $this = $(this),
            href, 
            target = $this.attr('data-target') 
                     || e.preventDefault() 
                     || (href = $this.attr('href')) 
                     && href.replace(/.*(?=#[^\s]+$)/, ''), //strip for ie7
            option = $(target).hasClass('in') ? 'hide' : "show"

            $('.panel-collapse').not(target).collapse("hide")
            $(target).collapse(option);
    })
});
  5. 2

    Je suis un peu en retard à la fête, mais pour l'avenir googlers, je suis venu avec un moyen beaucoup plus simple de le faire.

    De café, c'est du script, j'ai peur, mais vous devriez obtenir l'idée:

    $(".your-hoverable-object-class").mouseenter (e) ->
$this = $(this)
link = $this.find("a") #(assumes you only have one link)
target = link.attr('data-target') || e.preventDefault() || (href = link.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') #strip for ie7
unless $(target).hasClass('in')
  link.trigger('click') #Here's the money shot - just trigger the default functionality

    Le reste du code est de configurer les variables, vous pourriez avoir besoin d'ajuster cette fonction de la manière dont vous avez configuré et le dernier bit vérifie que le panneau n'est pas déjà ouvert avant le déclenchement de la cliquez de nouveau. Encore une fois - ce qui fonctionne pour mon set up, mais vous pouvez le supprimer si ne fonctionne pas pour vous.

  6. 2

    Basé sur la Falaise du Joint de la réponse, je suggère la mise en queue des animations pour prévenir panel-collapse de rester ouvert lorsque mouseleave se produit avant la collapse('show') animation est terminée.

    $('div.panel-collapse').on('shown.bs.collapse hidden.bs.collapse', function() {
  $(this).dequeue('collapse');
});
$('div.panel-heading').hover(
  function() {
    var collapse = $($(this).find('a').attr('href'));
    collapse.queue('collapse', function() {
      $(this).collapse('show');
    });
    if (!collapse.hasClass('collapsing')) {
      collapse.dequeue('collapse');
    }
  },
  function() {
    var collapse = $($(this).find('a').attr('href'));
    collapse.queue('collapse', function() {
      $(this).collapse('hide');
    });
    if (!collapse.hasClass('collapsing')) {
      collapse.dequeue('collapse');
    }
  }
}

    Ce n'est pas l'utilisation de poudres de codage, mais j'ai rencontré hoverévénements onloadlors de l'utilisation d'un nom de fonction. Peut-être que quelqu'un peut vous conseiller à ce sujet?

  7. 0

    C'est la manière la plus simple qui fait à la souris. En utilisant un javascript angularJs.

    Script 

    $scope.collapsePanel = function(variable) {
    if(document.getElementById(variable).className=="collapse in") {
        document.getElementById(variable).className="collapse";
        document.getElementById(variable).setAttribute("aria-expanded","false");
        } else {
            document.getElementById(variable).className="collapse in";  
            document.getElementById(variable).setAttribute("aria-expanded","true");
        }
}

    Code HTML

    <div ng-repeat="entity in entities">
<div class="panel-heading" ng-mouseover="collapsePanel(entity)">
     //Give your contents here
</div> 
</div>

    Remarque: le changement de ng-mouseover avec ng-click pour le faire fonctionner sur un clic au lieu de la souris