Блог

Главная - Вопросы по программированию - Как я могу сделать выпадающее меню открытым по умолчанию?

Как я могу сделать выпадающее меню открытым по умолчанию?

#bootstrap-4

Вопрос:

Я создаю свое приложение с помощью Bootstrap и Laravel 7, у меня есть выпадающее меню на панели управления, и я хотел бы, чтобы оно было постоянно открыто по умолчанию. Как я могу этого достичь? Спасибо.

Код в моем представлении лезвия:

 <li class="side-menus nav-item dropdown">
    <a href="#" class="nav-link has-dropdown"><i class="fas fa-folder-open"></i>
        <span>Job Cards</span></a>
        <ul class="dropdown-menu side-menus">
            <li class="side-menus {{ Request::is('client/new-jobcard') ? 'active' : '' }}">
                <a class="nav-link" href="{{ route('client.new-jobcard.index') }}">
                    <i class="far fa-address-card" aria-hidden="true"></i><span>New</span>
                </a>
            </li>
                <li class="side-menus {{ Request::is('client/potential-jobcard') ? 'active' : '' }}">
                    <a class="nav-link" href="{{ route('client.potential-jobcard.index') }}">
                        <i class="far fa-address-card" aria-hidden="true"></i><span>Potential</span>
                    </a>
                </li>
                <li class="side-menus {{ Request::is('client/progress-jobcard') ? 'active' : '' }}">
                    <a class="nav-link" href="{{ route('client.progress-jobcard.index') }}">
                        <i class="far fa-address-card" aria-hidden="true"></i><span>In Progress</span>
                    </a>
                </li>
                <li class="side-menus {{ Request::is('client/complete-jobcard') ? 'active' : '' }}">
                    <a class="nav-link" href="{{ route('client.complete-jobcard.index') }}">
                        <i class="far fa-address-card" aria-hidden="true"></i><span>Completed</span>
                    </a>
            </li>
    </ul>
</li>

Ответ №1:

Попробуйте использовать jQuery, хотя вы также можете использовать собственный javascript.

В данном случае мы используем jQuery для целей кода.

 $(document).ready(function () {
    $(".your-dropdown-btn").click();
});

Комментарии:

1. Спасибо за ваш ответ, я не так хорошо знаком с jQuery, как я могу добиться этого с помощью собственного JavaScript?

2. попробуйте использовать это окно.onload = функция(){ document.getElementById(‘ID_SELECTOR’).нажмите(); }

3. Мне удалось исправить с помощью CSS, я добавил display: inline-block; в свой файл CSS.

Метки: