Javascript 使引导4下拉菜单具有动态高度

我正在尝试使Bootstrap 4下拉列表具有以下风格：

这就是我现在所拥有的：

主要代码：

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

链接-1
箭头-1
链接-2
箭头-2
返回箭头1
儿童1
箭头2
儿童2

要使下拉列表具有滑动效果，请执行以下操作：

• 我将两个类

  .submenu-1

  和

  .submenu-2

  设置为

  display:none

  ，当用户单击箭头按钮时，将显示相应的子菜单并滑动到它

• 当用户点击返回箭头时，它将滑回主菜单，完成滑动效果后，它将隐藏子菜单

这就是我现在所拥有的。但我不知道如何调整下拉列表的高度以适应其中的内容（动态高度）

---

非常感谢。

单击时尝试使用隐藏和代码

您只需使用jQuery就可以做到这一点

$（“选择器”）.hide（）和$（“选择器”）.show（）

当用户单击自定义按钮时

解决方案：

我使用JS和

更改下拉列表的高度。子菜单-1

是我希望下拉列表适合的内容：

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

---

但有一个问题。在我第一次单击

箭头按钮时（这是第一次更改下拉列表的高度），过渡动画不起作用。但在那之后，它就完美地工作了。因此，我在global中添加了另一行，以便在页面加载时第一次更改高度。现在它对我非常有效。
谢谢。您知道如何使下拉列表具有与其内容相适应的动态高度吗？尝试创建自定义css，如果可以，根据内容提供动态内容填充或类似内容。同样，您可以使用JQuery提供动态css，这是一种非常古老的方法。您可以在StackOverflow上找到多个解决方案我在这里找到了一个解决方案：。它工作得很好，但在第一次单击
箭头按钮时，高度调整没有过渡效果。但第一次之后，它就完美地工作了。你能帮我调试一下吗？好的，很好，事实上我在平台上，正在睡觉