У меня возникли некоторые проблемы с проектом, я работаю над тем, чтобы заставить элемент в панели навигации правильно работать с несколькими выпадающими меню.
На данный момент я получил приведенный ниже код, который я пытался воспроизвести из примеров, которые я нашел в Интернете, и попросил коллег просмотреть мой код, но, похоже, ничегоработает ....
CSS:
.dropdown-submenu{
position: relative;
}
.dropdown-submenu a::after{
transform: rotate(-90deg);
position: absolute;
right: 3px;
top: 40%;
}
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{
display: flex;
flex-direction: column;
position: absolute !important;
margin-top: -30px;
left: 100%;
}
@media (max-width: 992px) {
.dropdown-menu{
width: 50%;
}
.dropdown-menu .dropdown-submenu{
width: auto;
}
}
HTML:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My Clusters
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
{%- for cluster in current_user.clusters.all() %}
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle">{{cluster.name}}</a>
<ul class="dropdown-menu">
{%- for school in cluster.schools.all() %}
<li>
<a class="dropdown-item" href="#">{{school.name}}</a>
</li>
{%- endfor %}
</ul>
</li>
{%- endfor %}
</ul>
</li>
Первое раскрывающееся меню (кластеры) работает нормально и отображает все имена кластеров, как и планировалось. Это выпадающее меню, которое вызывает проблемы и не заполняет базу данных школами, связанными с этим кластером. Я вижу стрелку выпадающего меню, когда страница отображается, но при нажатии на нее начальное меню снова сворачивается.
Конечный продукт, который я ищу, может иметь несколько кластеров из первого раскрывающегося списка итогда у каждого из этих кластеров будет список школ, связанных с кластером.
Любая и вся помощь очень ценится!