是否可以向上扩展下拉菜单的内容？

Question

我想在向上的引导下拉菜单（“下拉菜单”中使用手风琴，并使菜单向上展开。

正如您在代码示例中所见，我设法在下拉菜单中设置了“手风琴”。

这里是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

问题是，当折叠展开时，下拉菜单会移至按钮上方。有没有办法使手风琴和下拉菜单向上展开？谢谢。

Answer 1

您可以使用transform / rotate CSS属性强制将元素上下颠倒。您可能需要在内容上使用相同的属性以将其右侧翻转。我在动画CSS / JS应用程序以及横向翻转整个画布项目时都使用了此功能。

这里是CSS行

transform: rotate(180deg);

让我知道是否有帮助