使Bootstrap 4下垂具有动态高度

Question

我试图使Bootstra4下拉菜单具有以下风格：slinky.js.org

这就是我现在拥有的：https://codepen.io/nht910/pen/yLexeEM

主要代码：

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

    <div class="main-container">
        <div class="menu-container">
            <div class="menu-1">
                <span>Link-1</span>
                <button class="button-1">arrow-1</button>
            </div>
            <div class="menu-2">
                <span>Link-2</span>
                <button class="button-2">arrow-2</button>
            </div>
        </div>
        <div class="submenu-container">
            <div class="submenu-1">  <!-- submenu of .menu-1 -->
                <div class="arrow-back">
                    <button class="button-back-1">Arrow back 1</button>
                </div>
                <div>
                    <span>Child 1</span>
                </div>
            </div>
            <div class="submenu-2">  <!-- submenu of .menu-2 -->
                <div class="arrow-back">
                    <button class="button-back-2">Arrow back 2</button>
                </div>
                <div>
                    <span>Child 2</span>
                </div>
            </div>
        </div>

    </div>

</div>

使下垂有滑动效果：

• 我将两个类.submenu-1和.submenu-2设置为display: none，当用户单击箭头按钮时，将显示相应的子菜单并滑向它。
• 当用户点击箭头后，它将滑回主菜单，完成滑动效果后，它将隐藏子菜单。

这就是我现在拥有的。但我不知道如何调整下拉列表的高度以适应内容(动态高度)，比如slinky.js.org。

非常感谢。

Answer 1

解决方案：https://codepen.io/nht910/pen/OJMobEm

我用.submenu-1更改下拉列表的高度，这是我希望下拉列表适合的内容：

$('.dropdown-menu').height($('.submenu-1').outerHeight());

但有一个问题。在我第一次点击arrow button (这是第一次的高度下拉更改)，过渡动画不工作。但在那之后，它就完美地运作了。因此，我在全局添加了另一行，以便在页面加载时第一次更改高度。现在它对我来说是完美的。

Answer 2

点击时尝试使用隐藏&代码。

您可以简单地使用jQuery来完成

$("selector").hide() & $("selector").show()

当用户单击自定义按钮时