Javascript 是否有向上扩展下拉菜单内容的方法？

我想在引导下拉菜单中使用手风琴，并将菜单向上展开

正如您在代码示例中看到的，我设法在下拉列表中设置了“accordion”

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

下面是示例的链接

---

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

您可以使用transform/rotate CSS属性强制元素倒置。您可能需要对内容使用相同的属性来将其向右翻转。我在动画CSS/JS应用程序上使用过这个，也在横向翻转整个画布项目时使用过

这是CSS的一行

变换：旋转（180度）

让我知道，如果这有帮助
菜单在展开后不在按钮前面，那么菜单应该在什么时候在按钮前面？问题是，打开下拉列表时，每个元素的内容高度增加了32px。它不尊重它里面的可折叠元素。一种方法是只使用jQuery，让它应用您自己的公式，同时保持引导的样式。
$(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');
  });
});