时间戳

首页 > 解决方案 > 有没有办法向上扩展下拉菜单内容？

javascript - 有没有办法向上扩展下拉菜单内容？

问题描述

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

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

这是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,输出

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

标签： javascriptjquerybootstrap-4dropdowncollapse

解决方案

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

这是CSS的行

transform: rotate(180deg);

让我知道这是否有帮助

推荐阅读