Показать сообщение отдельно
  #1 (permalink)  
Старый 30.07.2019, 17:59
Интересующийся
Отправить личное сообщение для Трудяга Посмотреть профиль Найти все сообщения от Трудяга
 
Регистрация: 30.07.2019
Сообщений: 19

Реализовать примитивный дропдаун
Очень сложная для меня задача( может кто то объяснит как и что делать с этим)
Реализовать примитивный дропдаун. Изначально все dropdown-menu скрыты через класс .d-none. При клике на dropdown-item должен отображаться блок dropdown-menu который вложен именно в тот dropdown-item на котором произошел клик. При повторном клике на этот же dropdown-item блок dropdown-menu должен закрыться. При клике на любой другой dropdown-item уже открытый dropdown-menu должен закрываться а на тот который кликнули открываться.




<ul class="menu">
  <li class="dropdown-item">
    <span>Dropdown menu item</span>
    <div class="dropdown-menu d-none">
      <ul class="dropdown-list">
        <li>Dropdown item 1</li>
        <li>Dropdown item 2</li>
      </ul>
      <!-- / .dropdown-list -->
    </div>
    <!-- / .dropdown-menu -->
  </li>
  <!-- / .dropdown-item -->
  <li>
    <span>Menu item</span>
  </li>
  <!-- / li -->
  <li class="dropdown-item">
    <span>Dropdown menu item 2</span>
    <div class="dropdown-menu d-none">
      <ul class="dropdown-list">
        <li>Second Dropdown item 1</li>
        <li>Second Dropdown item 2</li>
      </ul>
      <!-- / .dropdown-list -->
    </div>
    <!-- / .dropdown-menu -->
  </li>
  <!-- / .dropdown-item -->
</ul>


.d-none {
  display: none;
}

.dropdown-item {
  cursor: pointer;
}

Последний раз редактировалось Трудяга, 31.07.2019 в 11:55.
Ответить с цитированием