Bootstrap Collapse fisarmonica su hover

Question

Sto utilizzando il plug-in di Bootstrap "Collapse" di Twitter in un progetto su cui sto lavorando. Ho una semplice fisarmonica (setup as per the documentation), ma desidero modificare la funzionalità predefinita da al click per il sull'evento hover.

Qualcuno può confermare il modo migliore per raggiungere questo obiettivo?

Answer 1

È possibile copiare il data-API comprimibile direttamente dallo script dei plug-in e modificarlo per ottenere la funzionalità di passaggio del mouse. Puoi quindi posizionarlo all'interno del tuo file script.js e scegliere come target il pieghevole che desideri venga modificato per l'apertura al passaggio del mouse anziché al clic. Prova questo per esempio:

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) 
    }) 
}) 

Questa è una copia diretta del blocco di dati-API trovato sul plug-in, ho appena sostituito l'evento click con mouseenter e anche la possibilità collapse, cambiato invece a show.

Demo: http://jsfiddle.net/um2q2/1/

Answer 2

ho raggiunto la funzionalità hover mantenendo 'Clickability' abbastanza facilmente:

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"); 
    } 
); 

ero già utilizzando i dati attributi, così li ho continuato, e li ha usati qui per grilletto i div di destra. "pointer" è una classe sui miei link di commutazione, quindi puoi adattarla a qualsiasi cosa ti serva.

Answer 3

Sono un po 'in ritardo per la festa, ma per i futuri googler, ho trovato un modo molto più semplice per farlo.

E 'scritto caffè ho paura, ma si dovrebbe ottenere l'idea:

$(".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 

Il resto del codice è la creazione delle variabili - potrebbe essere necessario modificare questo a seconda di come è stato impostato up - e l'ultimo bit controlla che il pannello non sia già aperto prima di fare nuovamente clic. Di nuovo - questo funziona per il mio set up, ma puoi rimuoverlo se non funziona per te.

Answer 4

Sulla base di risposta di Cliff Seal vi suggerisco di fare la coda per evitare che le animazioni panel-collapse di restare aperti quando si verifica mouseleave prima che l'animazione collapse('show') è finito.

$('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'); 
    } 
    } 
} 

questo non fa uso di codifica SECCO, ma ho incontrato hover eventi onload quando si utilizza una funzione denominata. Forse qualcuno può consigliarlo?

Answer 5

1. Aggiungere il seguente script

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

2. Aggiungere hoverExpand (o come volete chiamarlo) all'elemento.Vedere l'esempio di seguito

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

Answer 6

di mettere a lavorare per bootstrap3 ho fatto alcune modifiche

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

Answer 7

Questo è il modo più semplice per fare quello fatto al passaggio del mouse. Usando un semplice javascript in 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"); 
     } 
} 

codice HTML

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

Nota: il cambiamento ng-mouseover con ng clic per farlo funzionare su click invece di mouseover