Сделайте Bootstrap 4 выпадающего списка с динамической c высотой

Question

Я пытаюсь сделать раскрывающийся список Bootstrap 4 в таком стиле: 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, и когда пользователь нажимает кнопку со стрелкой, будет показано соответствующее подменю, которое переместится к нему.

• когда пользователь щелкнет стрелку назад, оно вернется в главное меню , и после эффекта скольжения fini sh он скроет подменю.

Это то, что у меня есть на данный момент. Но я не знаю, как изменить размер раскрывающегося списка, чтобы он соответствовал содержимому внутри него (Dynami c height), например slinky. js .org .

Большое спасибо.

Answer 1

Попробуйте использовать скрытие и код при нажатии.

вы можете просто сделать это, используя jQuery

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

, когда пользователь нажимает ваши пользовательские кнопки

Answer 2

Решение: https://codepen.io/nht910/pen/OJMobEm

Я изменяю высоту раскрывающегося списка, используя JS, где .submenu-1 - это содержимое, которое я хочу, чтобы раскрывающийся список соответствовал:

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

Но есть одна проблема. В первый раз, когда я нажимаю arrow button (высота раскрывающегося списка менялась впервые), анимация перехода не работает. Но после этого все работает отлично. Поэтому я добавляю еще одну строку в global, чтобы первое изменение высоты происходило при загрузке страницы. И теперь у меня отлично работает.