Bootstrap Collapse accordion on hover

Question

Я использую подключаемый модуль Twitter «Bootstrap« Collapse »в проекте, над которым я работаю. У меня простой аккордеон (настройка as per the documentation), но я хочу изменить функциональность по умолчанию от по щелчку на номер при наведении.

Может ли кто-нибудь подтвердить лучший способ достичь этого?

Answer 1

Вы можете скопировать сборные данные-api прямо из сценария плагинов и настроить его для достижения функциональности зависания. Затем вы можете поместить его в свой собственный файл script.js и нацелить сбрасываемый код, который хотите изменить, чтобы он включался при наведении, а не при щелчке. Попробуйте это, например:

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

Это прямая копия блока данных апи найти на плагин, я просто заменил click событие с mouseenter, а также возможность collapse, изменённой это вместо show.

Демо: http://jsfiddle.net/um2q2/1/

Answer 2

Я достиг функциональность парения, сохраняя при этом «кликабельности» довольно легко:

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

Я уже с использованием данных-атрибутов, так что я держал их, и использовать их здесь, чтобы триггер правые divs. «pointer» - это класс на моих переключаемых ссылках, поэтому вы можете адаптировать его к тому, что вам нужно.

Answer 3

Я немного опаздываю на вечеринку, но для будущих гуглеров я придумал гораздо более простой способ сделать это.

Это кофе сценарий я боюсь, но вы должны получить идею:

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

Остальная часть кода настройки переменных - вы, возможно, потребуется изменить это в зависимости, как вы установили его и последний бит проверяет, что панель еще не открыта перед повторным нажатием кнопки. Опять же - это работает для моей настройки, но вы можете удалить ее, если она не работает для вас.

Answer 4

Основываясь на ответе Клифф-тюленей, я предлагаю анимацию очередей, чтобы panel-collapse оставался открытым, когда mouseleave происходит до того, как анимация collapse('show') закончена.

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

Это не делает использование СУХИХ кодирования, но я столкнулся hover события onload при использовании имени функции. Может быть, кто-то может это посоветовать?

Answer 5

1. Добавьте следующий скрипт

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

2. Добавить hoverExpand (или что вы хотите назвать его) к элементу.Смотрите пример ниже

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

Answer 6

поставить его на работу для bootstrap3 я сделал некоторые изменения

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

Это самый простой способ сделать это делается при наведении курсора мыши. Использование простого 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"); 
     } 
} 

HTML код

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

Примечание: изменение нг-Mouseover с нг-кликни заставить его работать по щелчку, а не при наведении курсора