首次点击后，手风琴标签不会打开

Question

我正在尝试使用bootstrap为我未来的网站创建一个产品包的手风琴。

我在这里创建了一个工作测试版本：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。