时间戳

首页 > 解决方案 > 第一次点击后手风琴标签不打开

wordpress - 第一次点击后手风琴标签不打开

问题描述

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

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

不太确定我哪里出错了，希望得到一些建议。

谢谢！

标签： wordpressbootstrap-4accordion

解决方案

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

推荐阅读