0

我在我正在处理的项目中使用 Twitter 的 Bootstrap 'Collapse' 插件（文档）。我真的不喜欢必须单击每个父元素才能切换可折叠项目，因此我编写了自己的脚本来显示和隐藏悬停而不是单击时的可折叠项目。

这是脚本代码：

$(function spark_item_hover() {
    $(this).on('mouseenter.collapse.data-api', '[data-toggle=collapse]', function() {
        var $this = $(this), target = $this.attr('data-target')
        , option = $(target).data('collapse') ? 'show' : $this.data()
        $(target).collapse();
        $(target).show('true');
    })
    $(this).on('mouseleave.collapse.data-api', '[data-toggle=collapse]', function() {
        var $this = $(this), target = $this.attr('data-target')
        , option = $(target).data('collapse') ? 'hide' : $this.data()
        $(target).hide('true');
    })   
})

以下是我在 HTML 中调用脚本的方式（删除了不相关的内容）：

<li class="spark-item" onhover="spark_item_hover()" data-target="#context155" data-toggle="collapse">
    <div class="span11">
        <div class="row-fluid">
            <div id="context155" class="collapse" style="height: auto; display: none;"></div>
        </div>
    </div>
</li>

这基本上做了我想要它做的事情：当我将鼠标悬停在折叠的项目上时它会显示它，当我离开时它会隐藏它。唯一的问题是，API 中定义的点击事件（此处底部）仍在使用；当我单击父元素时，它仍然会切换可折叠项。我想知道是否有办法从 API 禁用点击切换？我仍然希望能够在元素内部单击（因为它包含指向其他页面的链接）；我只是不希望它切换可折叠项目。

4

1 回答 1

1

您可以使用另一个切换令牌：[data-toggle=hovercollapse]。这样插件将不会被启用。

于 2012-08-03T15:02:06.163 回答