En mi barra de navegación, estoy mostrando los elementos principales. Lo que estoy obteniendo usando el método getItems(). Está vinculado a todos los elementos. Y cada elemento principal tiene algunos elementos secundarios. Lo que estoy obteniendo usando ($item->children as $child) Y cuando uno se desplaza sobre cualquier elemento principal, los elementos secundarios de ese elemento principal deberían ser visibles desde el menú desplegable.

El problema es que cada vez que me desplazo por cualquier elemento, todos los elementos secundarios se muestran en el menú desplegable. Pero quiero que solo se muestre el elemento secundario del elemento principal. Es probable que el problema esté en mis bucles @foreach. Pero no voy a llegar a dónde. Sería bueno si alguien pudiera ayudarme. Gracias por adelantado.

Este es mi código de archivo Blade.

<div class="navbar-list">
      <div class="dropdown">
        @foreach(getItems() as $item)
          <a href="{{ route('item.shop.list') }}?item={{ $item->id }}">{{ $item->name }}</a>
          <div class="dropdown-menu">
            @foreach ($item->children as $child)
              <li class="dropdown-item" data-id="{{ $child->id }}" data-name="{{ $child->name }}">
                <span>{{ $child->name }}</span>
              </li>
            @endforeach
          </div>
        @endforeach       
      </div> 
    </div>

Y aquí está su estilo

<style>
 .dropdown:hover>.dropdown-menu {
  display: block;
  
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}
</style>
0
mage 456 1 sep. 2020 a las 15:57

1 respuesta

La mejor respuesta

Cada elemento de su primer @foreach debe tener su propio menú desplegable. Coloque <div class="dropdown"> dentro su bucle:

<div class="navbar-list">
  @foreach(getItems() as $item)
    <div class="dropdown">
      <a href="{{ route('item.shop.list') }}?item={{ $item->id }}">{{ $item->name }}</a>
      <div class="dropdown-menu">
        @foreach ($item->children as $child)
          <li class="dropdown-item" data-id="{{ $child->id }}" data-name="{{ $child->name }}">
            <span>{{ $child->name }}</span>
          </li>
        @endforeach
      </div>
    </div> 
  @endforeach       
</div>
0
brombeer 1 sep. 2020 a las 13:10