Есть ли способ расширить содержимое выпадающего меню вверх? - PullRequest
Новая
       17

Есть ли способ расширить содержимое выпадающего меню вверх?

1 голос
/ 13 октября 2019

Я хотел бы использовать аккордеон внутри выпадающего меню с направлением вверх («выпадающий») и заставить меню расширяться вверх.

Мне удалось настроить «аккордеон» внутри выпадающего меню, как вы можете видетьв примере кода.

Вот HTML-код 

<div class="dropup" id="dropdownUp">
            <button
              class="btn btn-secondary dropdown-toggle"
              type="button"
              id="btnGroup"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <div class="dropdown-menu" aria-labelledby="btnGroup" id="dmenu">
              <a class="dropdown-item keepopen" href="#c_1" data-toggle="collapse">Category 1</a>
              <ul class="collapse" id="c_1" data-parent="#dmenu">
                <li>Child 1-1</li>
                <li>Child 1-2</li>
                <li>Child 1-3</li>
              </ul>
              <a class="dropdown-item keepopen" href="#c_2" data-toggle="collapse">Category 2</a>
              <ul class="collapse" id="c_2" data-parent="#dmenu">
                <li>Child 2-1</li>
                <li>Child 2-2</li>
              </ul>
              <a class="dropdown-item keepopen" href="#c_3" data-toggle="collapse">Category 3</a>
              <ul class="collapse" id="c_3" data-parent="#dmenu">
                <li>Child 3-1</li>
              </ul>
            </div>
          </div>

А вот код JavaScript 

$(document).ready(function() {
  $('#dropdownUp').on('hide.bs.dropdown', function(e) {
    if ($(e.clickEvent.target).hasClass('keepopen')) {
      return false;
    }
    return true;
  });

  $('#dropdownUp').on('hidden.bs.dropdown', function() {
    $('.dropdown-menu .collapse.show').collapse('hide');
  });
});

Здесь ссылка на пример

https://jsbin.com/cirejudipu/edit?html,js,output

Проблема в том, что при расширении коллапса выпадающее меню переходит на кнопку. Есть ли способ заставить аккордеон и раскрывающееся меню расширяться вверх? Спасибо.

1 Ответ

1 голос
/ 13 октября 2019

Вы можете использовать свойство CSS transform / rotate, чтобы заставить элемент перевернуться вверх дном. вам может понадобиться использовать одно и то же свойство для содержимого, чтобы перевернуть их правой стороной вверх. Я использовал это в анимированных приложениях CSS / JS, а также при переворачивании целых проектов холста.

вот строка CSS

transform: rotate(180deg);

позвольте мнезнаю, поможет ли это

...