Javascript Bootstrap:手风琴不会自动折叠以前打开的面板

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11645501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 06:39:03  来源:igfitidea点击:

Bootstrap: Accordion not auto collapsing previously opened panel

javascriptasp.netasp.net-mvctwitter-bootstrap

提问by Matt

I need to create a bootstrap accordion. The markup below works fine, but it does not auto-collapse the previously opened element. For example, open panel1, then click on panel2.. panel1 should then auto-close, but it does not. I have tried copying the markup exactly from the bootstrap site (http://twitter.github.com/bootstrap/javascript.html#collapse), but it is not working. What am I missing?

我需要创建一个引导手风琴。下面的标记工作正常,但它不会自动折叠先前打开的元素。例如,打开 panel1,然后单击 panel2.. panel1 应该会自动关闭,但它不会。我曾尝试完全从引导站点 (http://twitter.github.com/bootstrap/javascript.html#collapse) 复制标记,但它不起作用。我错过了什么?

<h3>ACCORDION DEMO</h3>
<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel1">Panel 1</a>
        </div>
        <div class="accordion-body collapse" id="panel1">
            <div class="accordion-inner">
                <p>This is accordion panel 1 content</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel2">Panel 2</a>
        </div>
        <div class="accordion-body collapse" id="panel2">
            <div class="accordion-inner">
                <p>This is accordion panel 2 content</p>
            </div>
        </div>
    </div>
</div>

回答by baptme

simply replace data-parent="accordion1"with data-parent="#accordion1"

简单地替换data-parent="accordion1"data-parent="#accordion1"

回答by im1dermike

For posterity, another reason I just discovered that would prevent the accordion panels from auto-collapsing is if the .panelelements are not direct children of the accordion (.panel-groupelement). I had wrapped my panel content in a divwithin my .panel-groupand the accordion didn't like that.

对于后代,我刚刚发现会阻止手风琴面板自动折叠的另一个原因是.panel元素不是手风琴 ( .panel-groupelement) 的直接子元素。我已经将面板内容包裹div在我的内部.panel-group,手风琴不喜欢那样。

回答by user2064534

I was experiencing the same behavior, I removed the bootstrap transition module and it worked. Also fixed the issue with disappearing popovers.

我遇到了同样的行为,我删除了引导程序转换模块并且它起作用了。还修复了弹出窗口消失的问题。

回答by Hyman Gedreven

I was facing the same problem and did some changes based on a hunch.. It worked and now I would like to share my findings in case it may help someone.. I was using accordion collapse feature on more than one pages which was making them act strangely.. giving different panels unique href and panel id helped.

我遇到了同样的问题,并根据预感做了一些更改。。它起作用了,现在我想分享我的发现,以防它可能对某人有帮助。我在不止一页上使用手风琴折叠功能,这使它们行为奇怪.. 给不同的面板独特的 href 和面板 id 有帮助。