Question

我使用Twitter s Bootscrap 折叠插件来完成我正在做的一个项目。我有一个简单的手风琴( 设置 < a href=" http://twitter.github.com/bootsstrap/javascript.html#colfread" relation resl= " nofollow noreferrer" ), 以文件为准, 但我要修改默认功能, 从 < 坚固 > 点击 < /坚固 > 到 < 坚固 > 悬浮 < /坚固 > 事件。

我如何才能做到这一点?

Answer 1

您可以直接从插件脚本复制可折叠的数据 api, 并调整它, 以达到盘旋功能。您可以将它放置在自己的脚本中。 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 块的直接副本, 我刚刚用 < code > museenter 替换了 < code > kick 事件, 并替换了 < code > colradude 选项, 将其改为 < code>show 。

德莫:http://jsfiddle.net/um2q2/1/" rel="nreferrer" >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。 “ 指针” 是我的切换链接上的一门课, 这样你就可以适应你需要的任何东西。

Answer 3

添加以下脚本

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

Answer 4

我做了一些改动

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

我晚点去派对但对于未来的食人怪来说我提出一个简单得多的方法来做这个

恐怕是咖啡剧本,但你应该明白:

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

根据克里夫海豹的回答,我建议队列动画,以防止panel-core折叠在mouseleft 发生于colefraft(显示) 动画完成之前时不打开。

$( 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 events onload 。也许有人可以对此提供建议吗?

Answer 7

这是在鼠标翻转上完成此操作的最简单方法。在角 J 中使用普通的 javascript 。

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

<%% em> HTML 代码

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

注意: 使用 ng- 单击修改 ng- mouseover, 使其在单击而不是鼠标上有效。

友情链接