Bootstrap Colapsar el acordeón sobre el vuelo estacionario

Question

Estoy usando el complemento Boinastrap 'Colapsar' de Twitter en un proyecto en el que estoy trabajando. Tengo un acordeón simple (configuración as per the documentation), pero quiero modificar la funcionalidad predeterminada de en al en el evento.

¿Alguien puede confirmar la mejor manera de lograrlo?

Answer 1

Puede copiar la apliada de datos colapsable directamente desde el script de complementos y ajustarla para lograr la funcionalidad de desplazamiento. A continuación, puede colocarlo dentro de su propio archivo script.js y apuntar al desplegable que desea modificar para abrir al colocar el cursor sobre un elemento en lugar de hacer clic. Prueba esto, por ejemplo:

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

Ésta es una copia directa del bloque-API de datos que se encuentra en el plugin, Acabo de cambiar el evento click con mouseenter y también la opción collapse, cambiado a su vez a show.

Demostración: http://jsfiddle.net/um2q2/1/

Answer 2

he conseguido funcionalidad vuelo estacionario mientras se mantiene 'clickability' con bastante facilidad:

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

ya estaba utilizando la ficha atributos, por lo que los guardaba, y los han utilizado aquí para gatillo los divs correctos. "puntero" es una clase en mis enlaces alternativos, por lo que puedes adaptar eso a lo que necesites.

Answer 3

Llego un poco tarde a la fiesta, pero para futuros googlers, se me ocurrió una forma mucho más simple de hacerlo.

Es coffeescript me temo, pero debe tener la 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 

El resto del código es la creación de las variables - puede que tenga que ajustar esto dependiendo de cómo se haya configurado arriba - y el último bit comprueba que el panel no esté abierto antes de volver a activar el clic. De nuevo, esto funciona para mi configuración, pero puede eliminarlo si no funciona para usted.

Answer 4

Según la respuesta de Cliff Seal, sugiero que las animaciones de cola eviten que panel-collapse permanezca abierto cuando mouseleave se produce antes de que la animación collapse('show') finalice.

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

Esto no hace uso de la codificación seco, pero me encontré con hover eventos onload cuando se utiliza una función llamada. Tal vez alguien puede aconsejar sobre esto?

Answer 5

1. Añada la siguiente secuencia de comandos

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

2. Añadir hoverExpand (o como se quiera llamar) al elemento.Consulte el siguiente ejemplo

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

Answer 6

para poner a trabajar para bootstrap3 hice algunos cambios

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

Ésta es la forma más sencilla de hacer eso hecho pasar el ratón. Usando javascript simple en angularJs.

Guión

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

código HTML

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

Nota: el cambio ng-encima del ratón con ng clic para hacer que funcione al hacer clic en lugar de pasar el ratón