Вопрос по accordion, twitter-bootstrap, collapse – Bootstrap Свернуть гармошку при наведении

11

Я использую «Bootstrap» в «Твиттере», «Свернуть». Плагин в проекте, над которым я работаю. У меня есть простой аккордеон (настройкасогласно документации), но я хочу изменить функциональность по умолчанию изon click кon hover событие.

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

Ваш Ответ

7   ответов
2

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

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

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

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

9

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

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

Демо-версия:http://jsfiddle.net/um2q2/1/

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

Основываясь на ответе Клиффа Сила, я предлагаю анимацию в очереди, чтобы предотвратить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при использовании именованной функции. Может быть, кто-то может посоветовать по этому поводу?

10

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

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

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

4

Add the following script

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

Add hoverExpand (or whatever you want to call it) to the element. See example below

<a class="hoverExpand" data-toggle="collapse" data-parent="#accordion" 
   href="#collapseOne">A plane that flies below water</a>
Но я не хочу нажимать на элемент ни вручную, ни с помощью скрипта. щелкнув по нему следует открыть новую страницу
0

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

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

Note: change ng-mouseover with ng-click for making it work on click instead of mouseover

Похожие вопросы