11

作業中のプロジェクトでTwitterのBootstrap「Collapse」プラグインを使用しています。単純なアコーディオン（ドキュメントに従って設定）がありますが、デフォルトの機能をクリック時からホバー時のイベントに修正したいと思います。

誰かがこれを達成するための最良の方法を確認できますか？

4

7 に答える 7

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

私はすでにデータ属性を使用していたので、それらを保持し、ここでそれらを使用して適切なdivをトリガーしました。「ポインタ」は私のトグルリンクのクラスなので、必要に応じて調整できます。

于 2012-11-21T13:18:29.180 に答える
9

折りたたみ可能なdata-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)
    })
})

これは、プラグインにあるdata-apiブロックの直接コピーです。clickイベントをmouseenterオプションに置き換えただけで、代わりcollapseにに変更しましshowた。

デモ： http： //jsfiddle.net/um2q2/1/

于 2012-05-23T13:47:45.877 に答える
4

  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>
于 2014-07-25T01:05:17.070 に答える
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);
    })
});
于 2014-09-17T13:03:39.420 に答える
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

コードの残りの部分は変数を設定しています（設定方法によってはこれを微調整する必要がある場合があります）。最後のビットは、パネルがまだ開いていないことを確認してから、もう一度クリックをトリガーします。繰り返しますが、これは私の設定では機能しますが、機能しない場合は削除できます。

于 2013-05-23T10:12:51.460 に答える
2

Cliff Sealの回答に基づいて、アニメーションが終了する前に発生しpanel-collapseたときに開いたままにならないように、アニメーションをキューに入れることをお勧めします。mouseleavecollapse('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多分誰かがこれについてアドバイスすることができますか？

于 2014-05-01T11:12:09.967 に答える
0

これは、マウスオーバーでそれを行う最も簡単な方法です。angleJsでプレーンJavaScriptを使用します。

脚本 

$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-clickでng-mouseoverを変更します

于 2016-04-28T08:13:49.213 に答える