Question

我正在尝试使用引导程序为将来的网站为产品捆绑包创建手风琴。

我在此处创建了有效的测试版本：http://35.177.108.249/test/ 源代码：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Product 1</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet turpis quis eros rutrum ornare. Phasellus vehicula quam ac arcu pulvinar, at consectetur erat ultricies. Etiam cursus vulputate purus, ac ullamcorper lacus. Nam justo quam, finibus et diam vel, condimentum congue magna. Aliquam non elit vel dui malesuada pellentesque. Sed sed dapibus nulla. Donec finibus ex ut diam accumsan consectetur.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a  class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Product 2</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet turpis quis eros rutrum ornare. Phasellus vehicula quam ac arcu pulvinar, at consectetur erat ultricies. Etiam cursus vulputate purus, ac ullamcorper lacus. Nam justo quam, finibus et diam vel, condimentum congue magna. Aliquam non elit vel dui malesuada pellentesque. Sed sed dapibus nulla. Donec finibus ex ut diam accumsan consectetur.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a  class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Product 3</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet turpis quis eros rutrum ornare. Phasellus vehicula quam ac arcu pulvinar, at consectetur erat ultricies. Etiam cursus vulputate purus, ac ullamcorper lacus. Nam justo quam, finibus et diam vel, condimentum congue magna. Aliquam non elit vel dui malesuada pellentesque. Sed sed dapibus nulla. Donec finibus ex ut diam accumsan consectetur.</p>
            </div>
        </div>
    </div>
</div>

一切正常，没有问题，现在，当我尝试将相同的代码应用于我的产品捆绑包时，它无法正常工作，只有第一个选项卡打开和关闭，而其余的选项卡在单击后都无法打开。

http://35.177.108.249/product/bundle-product-test

不太确定我要去哪里错，并希望获得一些建议。

谢谢！

Answer 1

在第二页中，所有面板都具有相同的id。 Bootstrap使用这些来决定打开和关闭哪个面板。由于您有多个，因此它总是选择第一个。要解决此问题，您应该将id="collapseOne"更改为每个产品正文中唯一的内容，并相应地更改其上方的标签控件上的href="#collapseOne。

第一次单击后，手风琴选项卡不会打开

1 个答案: