Question

我有（应该是）一个相当简单的手风琴，表现得非常奇怪。这是HTML：

<div class="panel-group" id="accordion" style="width:100%;margin:0 1% 0 1%;padding:0 0 5px 0;text-align:center">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Why_Body">
                    <h3 id="Public_Home_Why">
                        <strong>
                            {{Landing_Page_Messages.Why_Title}}
                        </strong>
                    </h3>
                </a>
            </h4>
        </div>
        <div id="Public_Home_Why_Body" class="panel-collapse collapse in">
            <div class="panel-body" style=";text-align:justify">
                <font size="4">
                    {{Landing_Page_Messages.Why_Body}}
                </font>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_What_Body">
                    <h3 id="Public_Home_Why">
                        <strong>
                            {{Landing_Page_Messages.What_Can_Do_Title}}
                        </strong>
                    </h3>
                </a>
            </h4>
        </div>
        <div id="Public_Home_What_Body" class="panel-collapse collapse">
            <div class="panel-body" style=";text-align:justify">
                <font size="4">
                    {{Landing_Page_Messages.What_Can_Do_Body}}
                </font>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" id="Public_Home_How">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_How_Body">
                    <h3 id="Public_Home_Why">
                        <strong>
                            {{Landing_Page_Messages.How_Does_it_Title}}
                        </strong>
                    </h3>
                </a>
            </h4>
        </div>
        <div id="Public_Home_How_Body" class="panel-collapse collapse">
            <div class="panel-body" style=";text-align:justify">
                <font size="4">
                    {{Landing_Page_Messages.How_Does_it_Body}}
                </font>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" id="Public_Home_Your_Role">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Your_Role_Body">
                    <h3 id="Public_Home_Your_Role">
                        <strong>
                            {{Landing_Page_Messages.Your_Role_Title}}
                        </strong>
                    </h3>
                </a>
            </h4>
        </div>
        <div id="Public_Home_Your_Role_Body" class="panel-collapse collapse">
            <div class="panel-body" style=";text-align:justify">
                <font size="4">
                    {{Landing_Page_Messages.Your_Role_Body}}
                </font>
            </div>
        </div>
    </div>
</div>

当页面打开时，第一个＆＃34;文件夹＆＃34;手风琴是开放的（而不是封闭的）。我点击的任何面板都会导致 FIRST 条目打开和关闭，但我点击的面板主体仍然会折叠。

我显然有一些错字但......重读之后几十次找不到它。

任何人都可以检查并指出我的错误吗？

非常感谢提前!!

Answer 1

发现问题!!!

在代码中有一个地方有另一个与手风琴面板之一同名的元素。老实说，我偶然发现它（！）。

这也解释了为什么Skelly和ProgrammerV5进行的测试有效（在他们检查的那篇文章中没有名称冲突）。

非常感谢那些花时间测试它的人。

Bootstrap Accordion错误行为

1 个答案: