Bootstrap崩溃数据父项不起作用 [英] Bootstrap collapse data-parent not working

问题描述

我正在使用引导程序2.2.1，无论出于何种原因，data-parent属性均未达到预期的目的.当我单击另一个目标时，它不会关闭先前打开的目标.这是一个小提琴，其中包含以下代码，有关如何解决此问题的任何想法?

I'm using bootstrap 2.2.1 and for whatever reason the data-parent attribute is not doing what is intended. It does not close a previous opened target when i click another target. Here's a fiddle with the code below, any ideas on how to fix this ?

<div id="accordion">
    <ul>
        <li>
            <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
            <ul id="document" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
        <li>
            <a href="#">option 2</a>
        </li>
        <li>
            <a href="#">option 3</a>
        </li>
         <li>
            <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
            <ul id="document2" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
    </ul>
</div>

推荐答案

我也无法使它正常工作-这可能是Bootstrap JS中与您使用列表而不是div有关的事实吗?

I couldn't get this to work either - this may be something in the Bootstrap JS related to the fact that you are using lists rather than divs?

因此，要使其正常工作，我必须覆盖click事件.基于此处的问题:可折叠的手风琴无法在dropdpwn-menu引导程序

So to get it to work, I had to override the click event. Based on this question here: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap

我向每个选项链接添加了accordion-toggle类，然后添加了以下JavaScript以使其起作用:

I added an accordion-toggle class to each option link, and then added the following JavaScript to get it to work:

$(document).on('click', '.accordion-toggle', function(event) {
        event.stopPropagation();
        var $this = $(this);

        var parent = $this.data('parent');
        var actives = parent && $(parent).find('.collapse.in');

        // From bootstrap itself
        if (actives && actives.length) {
            hasData = actives.data('collapse');
            //if (hasData && hasData.transitioning) return;
            actives.collapse('hide');
        }

        var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7

        $(target).collapse('toggle');
});​

此小提琴显示了它的作用.

这篇关于Bootstrap崩溃数据父项不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！