Как превратить список в сворачиваемый список, используя bootstrap

Question

У меня есть задача создать мобильное представление , и оно должно выглядеть как на мобильных устройствах. Я обязан использовать bootstrap, но я не знаю, как создать эту функцию. Я не понимаю, как я могу без jquery добавить класс свертывания или иным образом свернуть эти элементы при изменении ширины устройства. Я пытался использовать панели, но они даже не переключались, хотя в примере с документами все работало. Вот мой HTML:

<div class='panel-group' id='my-accordion'>
    <div class='panel panel-primary'>
        <div class='panel-heading'>
            <h3 class='panel-title' data-target='#panel-1' data-toggle='collapse'>Store & Sites</h3>
            <div class='panel-collapse collapse' id='panel-1'>
                <div class='panel-body'>
                    <ul>
                        <li>Our Store</li>
                        <li>Site Map</li>
                        <li>Terms of use</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Пожалуйста, дайте мне несколько идей.

PS: Мы используем третью версию в нашем проекте.

Answer 1

Ваш код в порядке, но вам нужно включить скрипты в правильном порядке:

1. Bootstrap CSS
2. jQuery
3. jQuery Bootstrap JS

Например:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Возможное CSS решение:

@media screen and (min-width: 768px) {
  .panel-title {
    pointer-events: none;
  }
  .panel-collapse.collapse:not(.show) {
    display: block;
  }
}