Аккордеонные вкладки не открываются после первого клика - PullRequest
Новая
       12

Аккордеонные вкладки не открываются после первого клика

1 голос
/ 11 апреля 2019

Я пытаюсь создать аккордеон для комплекта продуктов для моего будущего веб-сайта с помощью начальной загрузки.

Я создал рабочую тестовую версию здесь: 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>

Все работает отлично, без проблем, теперь, когда я пытаюсь применить тот же код к моему комплекту продуктов, он работает неправильно, только первая вкладка открывается и закрывается, а остальные не открываются после 1 клика.

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

Не совсем уверен, где я иду не так, и хотел бы получить совет.

Спасибо!

1 Ответ

1 голос
/ 11 апреля 2019

На вашей второй странице все панели имеют одинаковые id. Bootstrap использует их, чтобы решить, какую панель открывать и закрывать. Так как у вас есть несколько, он всегда выбирает первый. Чтобы это исправить, вы должны изменить id="collapseOne" на что-то уникальное в каждом из тел продукта, и соответственно изменить href="#collapseOne на элементе управления над вкладкой.

...