jquery – Bootstrap折叠数据 – 父级无法正常工作

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap折叠数据 – 父级无法正常工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用bootstrap 2.2.1,无论出于何种原因,data-parent属性没有按预期执行.当我点击另一个目标时,它不会关闭先前打开的目标.这是一个带有下面代码fiddle,关于如何解决这个问题的任何想法?
<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?

为了让它工作,我不得不重写click事件.基于这个问题:Collapsible accordion doesn’t work inside a dropdpwn-menu Bootstrap

我为每个选项链接添加了一个accordion-toggle类,然后添加了以下JavaScript以使其工作:

$(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');
});​

这个fiddle显示了它的实际效果.

原文链接:https://www.f2er.com/jquery/180764.html

猜你在找的jQuery相关文章