Laravel сворачиваемая динамика c Category-Subcategory-Sidebar при нажатии на одну родительскую категорию - PullRequest
Новая
       27

Laravel сворачиваемая динамика c Category-Subcategory-Sidebar при нажатии на одну родительскую категорию

0 голосов
/ 08 февраля 2020

код ниже показывает мою текущую реализацию боковой панели с динамическими c категориями и подкатегориями. Рекурсивный подход в основном работает нормально, но так как со временем навигация по боковой панели может стать очень большой, сворачивание только активной (после щелчка) родительской категории было бы неплохо иметь (и повторно свернуть предварительно активный).

Я осознаю, что моя текущая реализация ссылается на переменную id = "drop" e, указанную в div, и , следовательно, сворачивает сразу все подкатегории (при нажатии) в одной из родительских категорий) .. Так как это мой первый laravel проект, я не совсем профессионал в этом топи c. Не очень важно делать то же самое с подкатегорией и подкатегорией. Когда щелкают по родительской категории, структура дырок этой родительской категории (также называемая подкатегориями) может разрушиться, что вполне нормально, если только она не нажата. (не все: D)

JQuery в настоящее время не используется, поэтому, если мне нужно импортировать это, пожалуйста, добавьте ссылку или учебное пособие о том, как это сделать: )

Спасибо за вашу большую помощь заранее:) 

           <div class="card">
                <div class="card-header">
                    Bereichsnavigation:
                    <button data-toggle="modal" data-target="#addkat" title="Kategorie hinzufügen" class="addButton">Kat <i class="plus circle icon"></i></button>
                </div>
                <div class="list-group list-group-flush">
                  <ul style="display: contents;">
                    @foreach ($categories as $category)
                    <form action="{{ route('linktomain') }}" method="POST" style="display:inline; margin-bottom:0;">
                      @csrf

                        <li style="list-style-type: none;display:flex;width:106.5%;">
                          <input type="hidden" name="tomain" value="{{$category->id}}">
                          <a data-toggle="collapse" data-target="#drop" aria-expanded="false" class="list-group-item list-group-item-action">{{ $category->name }}
                          </a>
                          <button type="submit" style="display:contents;">
                            <span class="kat-badge badge"><i class="arrow alternate circle right icon"></i></span>
                          </button>
                        </li>

                      <ul style="display: contents;">
                          @foreach ($category->childrenCategories as $childCategory)
                            @if (is_null($category->category_id))
                            <div class="collapse" id="drop">
                              <a href="#" data-toggle="dropdown" class="card-left card-body-left" style="z-index:0;">{{$category->name}}
                                <div style="right: 17.5px; position: absolute;">ID: {{ $childCategory->id }}</div>
                              </a>
                            </div>
                            @endif
                            <div class="collapse" id="drop">
                              @include('pages.child_category', ['child_category' => $childCategory])
                            </div>
                          @endforeach

                      </ul>

                    </form>
                  @endforeach
                </ul>
                </div>
            </div>```
...