Блог

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

Как добавить ссылку на складной элемент в раскрывающемся меню в начальной загрузке 5?

#css #dropdown #bootstrap-5

Вопрос:

Мне нужно иметь возможность добавлять ссылку на «Главная страница» и «Страницы» при нажатии на нее, а также сворачивать и показывать элементы li снизу.

Я изменил «#homeSubmenu» из ссылки со ссылкой, но при нажатии она не сворачивается.

 <div class="wrapper">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>
    
            <ul class="list-unstyled components">
               <li class="active">
                    <a href="#homeSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                        <li>
                            <a href="#">Home 2</a>
                        </li>
                        <li>
                            <a href="#">Home 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#pageSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">Page 1</a>
                        </li>
                        <li>
                            <a href="#">Page 2</a>
                        </li>
                        <li>
                            <a href="#">Page 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    
    </div>

Ответ №1:

Используйте data-bs-target для сворачивания и href для ссылки..

       <li class="active">
                <a href="/" data-bs-toggle="collapse"  data-bs-target="#homeSubmenu" aria-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#">Home 1</a>
                    </li>
                    <li>
                        <a href="#">Home 2</a>
                    </li>
                    <li>
                        <a href="#">Home 3</a>
                    </li>
                </ul>
      </li>

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

1. Я внес изменения, но они не работают. Если я удалю «data-bs-toggle=»свернуть», я смогу видеть все содержимое, которое мне нужно, при нажатии на страницы. Проблема в переключателе data-bs. При добавлении он просто сворачивается, но содержимое страницы не отображается. Мне нужно, чтобы он свернулся, но также для одновременного доступа к ссылке href и отображения содержимого этой ссылки href.

Метки: