boostrap многоуровневый выпадающий внутри того же div - PullRequest
Новая
       1

boostrap многоуровневый выпадающий внутри того же div

0 голосов
/ 16 марта 2020

Мне нужно многоуровневое раскрывающееся меню, но не так многоуровневое раскрывающееся значение . Я хочу открыть многоуровневый выпадающий в той же панели. Итак, я создал выпадающий список на основе коллапса аккордеона. но в соответствии со свойством по умолчанию для свернутой панели, когда остальные свернутые панели увеличиваются или уменьшаются в зависимости от доступного пространства.

Я хочу, чтобы при нажатии на любую опцию в раскрывающемся списке она была видна в том же месте, чтобы увидеть код образец 

.multi_level_select {
  box-shadow: 0px 0px 11px 0px rgba(155, 155, 155, 0.5);
  border-radius: 6px;
  margin: 2em;
}

.multi_select {
  padding: 0.5em 1em;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.multi_select_options {
  max-height: 13em;
  overflow: auto;
}

.multi_select_options label {
  margin-bottom: 0;
}

.multi_select_options .option,
.multi_select_options .main_option,
.multi_options .options {
  padding: 0.5em 1em;
}

.multi_select_options .option:hover,
.multi_select_options .main_option:hover {
  background-color: #1e90ff;
}
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link href="./assets/css/custom_scroll.css" rel="stylesheet" />
    <title>HTML</title>
  </head>

  <body>

    <section>
      <select class="main_multi_select">
        <option value="">Select an option</option>
      </select>

      <div class="multi_level_select">
        <div class="multi_select">
          Select an option
        </div>
        <div class="multi_select_options" id="multi_select_options">
          <div class="multi_options" id="level_1">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="level1" href="#level1"> Level 1 </label>
            <div class="options collapse" id="level1" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 1.1 </label>
              <label class="option d-flex"> Option 1.2 </label>
              <label class="option d-flex"> Option 1.3 </label>
              <label class="option d-flex"> Option 1.4 </label>
              <label class="option d-flex"> Option 1.5 </label>
              <label class="option d-flex"> Option 1.6 </label>
              <label class="option d-flex"> Option 1.7 </label>
              <label class="option d-flex"> Option 1.8 </label>
              <label class="option d-flex"> Option 1.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_2">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level2" href="#level2"> Level 2 </label>
            <div class="options collapse" id="level2" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 2.1 </label>
              <label class="option d-flex"> Option 2.2 </label>
              <label class="option d-flex"> Option 2.3 </label>
              <label class="option d-flex"> Option 2.4 </label>
              <label class="option d-flex"> Option 2.5 </label>
              <label class="option d-flex"> Option 2.6 </label>
              <label class="option d-flex"> Option 2.7 </label>
              <label class="option d-flex"> Option 2.8 </label>
              <label class="option d-flex"> Option 2.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_3">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level3" href="#level3"> Level 3 </label>
            <div class="options collapse" id="level3" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 3.1 </label>
              <label class="option d-flex"> Option 3.2 </label>
              <label class="option d-flex"> Option 3.3 </label>
              <label class="option d-flex"> Option 3.4 </label>
              <label class="option d-flex"> Option 3.5 </label>
              <label class="option d-flex"> Option 3.6 </label>
              <label class="option d-flex"> Option 3.7 </label>
              <label class="option d-flex"> Option 3.8 </label>
              <label class="option d-flex"> Option 3.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_4">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level4" href="#level4"> Level 4 </label>
            <div class="options collapse" id="level4" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 4.1 </label>
              <label class="option d-flex"> Option 4.2 </label>
              <label class="option d-flex"> Option 4.3 </label>
              <label class="option d-flex"> Option 4.4 </label>
              <label class="option d-flex"> Option 4.5 </label>
              <label class="option d-flex"> Option 4.6 </label>
              <label class="option d-flex"> Option 4.7 </label>
              <label class="option d-flex"> Option 4.8 </label>
              <label class="option d-flex"> Option 4.9 </label>
            </div>
          </div>
          <label class="option d-flex"> Option 5 </label>
          <label class="option d-flex"> Option 6 </label>
          <label class="option d-flex"> Option 7 </label>
          <div class="multi_options" id="level_8">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level8" href="#level8"> Level 8 </label>
            <div class="options collapse" id="level8" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 8.1 </label>
              <label class="option d-flex"> Option 8.2 </label>
              <label class="option d-flex"> Option 8.3 </label>
              <label class="option d-flex"> Option 8.4 </label>
              <label class="option d-flex"> Option 8.5 </label>
              <label class="option d-flex"> Option 8.6 </label>
              <label class="option d-flex"> Option 8.7 </label>
              <label class="option d-flex"> Option 8.8 </label>
              <label class="option d-flex"> Option 8.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_9">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level9" href="#level9"> Level 9 </label>
            <div class="options collapse" id="level9" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 9.1 </label>
              <label class="option d-flex"> Option 9.2 </label>
              <label class="option d-flex"> Option 9.3 </label>
              <label class="option d-flex"> Option 9.4 </label>
              <label class="option d-flex"> Option 9.5 </label>
              <label class="option d-flex"> Option 9.6 </label>
              <label class="option d-flex"> Option 9.7 </label>
              <label class="option d-flex"> Option 9.8 </label>
              <label class="option d-flex"> Option 9.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_10">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level10" href="#level10"> Level 10 </label>
            <div class="options collapse" id="level10" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 10.1 </label>
              <label class="option d-flex"> Option 10.2 </label>
              <label class="option d-flex"> Option 10.3 </label>
              <label class="option d-flex"> Option 10.4 </label>
              <label class="option d-flex"> Option 10.5 </label>
              <label class="option d-flex"> Option 10.6 </label>
              <label class="option d-flex"> Option 10.7 </label>
              <label class="option d-flex"> Option 10.8 </label>
              <label class="option d-flex"> Option 10.9 </label>
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

    <script src="./assets/js/custom_scroll.js"></script>
  </body>
</html>

, когда я нажимаю «уровень 1», он открывает свой подкомпонент. Теперь я хочу открыть другой уровень, скажем, «уровень 4», поэтому я прокручиваю вниз и помещаю уровень в последнюю (пятую) позицию открытой панели (показывая пять элементов одновременно). Когда я нажимаю, обратите внимание, что «Уровень 4» прокручивается вверх и не виден. он не должен прокручиваться выше, он должен открываться в позиции 4 в видимом выпадающем меню.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...