有没有办法向上扩展下拉菜单内容？答案

【问题标题】：Is there a way to expand the dropdown menu content upwards?有没有办法向上扩展下拉菜单内容？
【发布时间】：2020-02-10 10:00:15
【问题描述】：

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

正如您在代码示例中看到的那样，我设法在下拉菜单中设置了“手风琴”。

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

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

【问题讨论】：

展开后菜单不在按钮前面，什么时候菜单应该在按钮前面？
问题是打开下拉菜单时，每个元素的内容高度增加了32px。它不尊重您在其中的可折叠元素。一种方法是仅使用 jQuery 并使其应用您自己的公式，同时保持 Bootstrap 的样式。

标签： javascript jquery bootstrap-4 dropdown collapse

【解决方案1】：

您可以使用 transform/rotate CSS 属性来强制元素上下颠倒。您可能需要在内容上使用相同的属性才能将它们正面朝上翻转。我已经在动画 CSS/JS 应用程序以及横向翻转整个画布项目中使用了它。

这是CSS的行

transform: rotate(180deg);

如果有帮助请告诉我

【讨论】：