Бутстрап Коллапс аккордеона при наведении

Ответ 1

Вы можете скопировать сборные данные-api прямо из плагинов script и настроить его для достижения функциональности зависания. Затем вы можете поместить его в свой собственный файл 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)
    })
})

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

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

Ответ 2

Я получил функциональность зависания, сохраняя при этом "clickability" довольно легко:

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

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

Ответ 3

• Добавьте следующий script

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

• Добавить hoverExpand (или все, что вы хотите назвать) элементу. Пример ниже

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

Ответ 4

чтобы заставить его работать для 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);
    })
});

Ответ 5

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

Это кофе script Боюсь, но вы должны понять:

$(".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 the money shot - just trigger the default functionality

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

Ответ 6

На основе ответа на Cliff Seal я предлагаю анимацию очередей, чтобы предотвратить 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');
    }
  }
}

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

Ответ 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>

Примечание: измените ng-mouseover на ng-click, чтобы заставить его работать с кликом, а не с помощью мыши.