html 引导程序折叠数据-父项不工作

tgabmvqs 于 2022-11-20 发布在其他

关注(0)|答案(4)|浏览(142)

我使用的是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>

Html

来源：https://stackoverflow.com/questions/13665800/bootstrap-collapse-data-parent-not-working

4条答案

按热度按时间

drkbr07n1#

引导程序文档中说：
如果提供了选择器，则显示此可折叠项时，将关闭指定父项下的所有可折叠元素。（类似于传统的可折叠行为- * 这取决于panel类 *）
因此它必须与panel-groups一起使用，但无论如何都可以覆盖javascript。
http://getbootstrap.com/javascript/#collapse-options

赞(0）回复(0）举报 2022-11-20

zhte4eai2#

我也不能让这个工作-这可能是在引导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显示了它的运行情况。

赞(0）回复(0）举报 2022-11-20

xkrw2x1b3#

我也一直在为bootstrap崩溃而挣扎。我试图做一些稍微不同的事情。我想要内联切换行为。请看下面我的JS小提琴。我发现bootstrap似乎需要“accordion-group”div的存在，除了他们的文档中包含的data-parent属性。所以要么是JS中有bug，要么是他们的文档没有包含它。我还得把 accordion 组的风格归零...
http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2">
   <div class="accordion-group" style="border:0;padding:0;margin:0">
      <div id="collapseOne" class="collapse in">
            Foo Bar...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
               Show Herp Derp
            </a>
      </div>
      <div id="collapseTwo" class="collapse">
            Herp Derp...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Show Foo Bar
            </a> 
      </div>
   </div>
</div>

赞(0）回复(0）举报 2022-11-20

oknwwptz4#

您必须在项目中使用accordion-group类，请参阅问题https://github.com/twitter/bootstrap/issues/4988

赞(0）回复(0）举报 2022-11-20