Bootstrap развал не работает на вложенный неупорядоченный список - PullRequest
Новая
       18

Bootstrap развал не работает на вложенный неупорядоченный список

0 голосов
/ 09 марта 2019

У меня возникли некоторые проблемы при сворачивании и расширении элементов вложенного неупорядоченного списка.

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

Пожалуйста, смотрите прикрепленный рабочий пример кода, демонстрирующий возникшую у меня проблему. 

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <ul class="list-group list-group-flush">
      <li class="list-group-item list-group-item-action">
        <a href="#f1499360-b771-487a-9d84-e399f69f4568" data-toggle="collapse" class="" aria-expanded="true">
          <h3>Test Site</h3>
        </a>
        <div class="collapse show" id="f1499360-b771-487a-9d84-e399f69f4568" style="">
          <ul class="list-group">
            <li class="list-group-item">
              <a href="#c6f8ebd3-5a92-461d-a37b-dcf314897361" data-toggle="collapse" class="" aria-expanded="true">
                <h5>132</h5>
              </a>
              <div class="collapse show" id="c6f8ebd3-5a92-461d-a37b-dcf314897361" style="">
                <ul class="list-group">
                  <li class="list-group-item">
                    <a href="#e867a283-4dee-44fa-884a-6b7cf7cc42fe" data-toggle="collapse" class="" aria-expanded="true">
                      <h5>Hello</h5>
                    </a>
                    <div class="collapse show" id="e867a283-4dee-44fa-884a-6b7cf7cc42fe" style="">
                      <ul class="list-group">
                        <li class="list-group-item">
                          <h6>Direct Connect Drive Status</h6>
                          <div class="float-left">Drive 1:</div>
                          <div class="float-right">Float right on all viewport sizes</div><br>
                          <div class="float-left">Drive 2:</div>
                          <div class="float-right">Float right on all viewport sizes</div><br>
                          <div class="float-left">Drive 3:</div>
                          <div class="float-right">Float right on all viewport sizes</div><br>
                          <div class="float-left">Drive 4:</div>
                          <div class="float-right">Float right on all viewport sizes</div><br>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <a href="#50e71ff4-7ef5-4b2e-8615-cdfe328320a9" data-toggle="collapse">
                      <h5>name 2</h5>
                    </a>
                    <div class="collapse" id="50e71ff4-7ef5-4b2e-8615-cdfe328320a9">
                      <ul class="list-group">
                        <li class="list-group-item">
                          <h6>Direct Connect Drive Status</h6>
                          <div class="float-left">Drive 1:</div>
                          <div class="float-right">Float right on all viewport sizes</div><br>
                          <div class="float-left">Drive 2:</div>
                          <div class="float-right">Float right on all viewport sizes</div><br>
                          <div class="float-left">Drive 3:</div>
                          <div class="float-right">Float right on all viewport sizes</div><br>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <a href="#4c6fc729-78b4-4d06-bbdd-749c96cafd05" data-toggle="collapse">
                      <h5>Test Assign</h5>
                    </a>
                    <div class="collapse" id="4c6fc729-78b4-4d06-bbdd-749c96cafd05">
                      <ul class="list-group">
                        <li class="list-group-item">
                          <h6>Direct Connect Drive Status</h6>
                          <div class="float-left text-warning">Not Configured - Check Settings</div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="list-group-item">
              <a href="#5b2e25aa-c480-445b-91a6-a46f61291a51" data-toggle="collapse">
                <h5>aaa</h5>
              </a>
              <div class="collapse" id="5b2e25aa-c480-445b-91a6-a46f61291a51">
                <ul class="list-group">
                  <li class="list-group-item">
                    <a href="#cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47" data-toggle="collapse">
                      <h5>Station module 2</h5>
                    </a>
                    <div class="collapse" id="cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47">
                      <ul class="list-group">
                        <li class="list-group-item">
                          <h6>Direct Connect Drive Status</h6>
                          <div class="float-left text-warning">Not Configured - Check Settings</div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

</body>

</html>

1 Ответ

0 голосов
/ 09 марта 2019

Использование идентификаторов элементов, которые начинаются с цифр, не будет работать.Переименуйте идентификаторы или добавьте нечисловой символ, такой как _ ...

Демо: https://www.codeply.com/go/1xEVX8Ye2u

<ul class="list-group">
    <li class="list-group-item">
        <a href="#c6f8ebd3-5a92-461d-a37b-dcf314897361" data-toggle="collapse" class="" aria-expanded="true">
            <h5>132</h5>
        </a>
        <div class="collapse show" id="c6f8ebd3-5a92-461d-a37b-dcf314897361" style="">
            <ul class="list-group">
                <li class="list-group-item">
                    <a href="#e867a283-4dee-44fa-884a-6b7cf7cc42fe" data-toggle="collapse" class="" aria-expanded="true">
                        <h5>Hello</h5>
                    </a>
                    <div class="collapse show" id="e867a283-4dee-44fa-884a-6b7cf7cc42fe" style="">
                        <ul class="list-group">
                            <li class="list-group-item">
                                ...
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#_50e71ff4-7ef5-4b2e-8615-cdfe328320a9" data-toggle="collapse">
                        <h5>name 2</h5>
                    </a>
                    <div class="collapse" id="_50e71ff4-7ef5-4b2e-8615-cdfe328320a9">
                        <ul class="list-group">
                            <li class="list-group-item">
                                ...
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="#_4c6fc729-78b4-4d06-bbdd-749c96cafd05" data-toggle="collapse">
                        <h5>Test Assign</h5>
                    </a>
                    <div class="collapse" id="_4c6fc729-78b4-4d06-bbdd-749c96cafd05">
                        <ul class="list-group">
                            <li class="list-group-item">
                                ...
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="list-group-item">
        <a href="#5b2e25aa-c480-445b-91a6-a46f61291a51" data-toggle="collapse">
            <h5>aaa</h5>
        </a>
        <div class="collapse" id="5b2e25aa-c480-445b-91a6-a46f61291a51">
            <ul class="list-group">
                <li class="list-group-item">
                    <a href="#cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47" data-toggle="collapse">
                        <h5>Station module 2</h5>
                    </a>
                    <div class="collapse" id="cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47">
                        <ul class="list-group">
                            <li class="list-group-item">
                                ...
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...