Question

我在我正在处理的项目中使用Twitter的Bootstrap'Collapse'插件（documentation）。我不太喜欢为了使可折叠项目切换而必须单击每个父元素的方式，所以我编写了自己的脚本来显示和隐藏悬停时的可折叠项目，而不是点击。

这是脚本代码：

$(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中定义的点击事件（here的底部）仍然在使用;当我点击父元素时，它仍然切换可折叠项目。我想知道是否有办法禁用API的点击切换？我仍然希望能够在元素内部单击（因为它包含指向其他页面的链接）;我只是不希望它切换可折叠项目。

Answer 1

您可以使用其他切换令牌：[data-toggle=hovercollapse]。这样就不会启用该插件。

如何禁用Bootstrap Collapse的API单击事件

1 个答案: