Как расширить все родительские элементы элемента начальной загрузки? - PullRequest
Новая
       40

Как расширить все родительские элементы элемента начальной загрузки?

0 голосов
/ 08 октября 2018

У меня есть навигация Bootstrap 4 на боковой панели, которая использует динамический контент из БД и отображается как дерево.Это работает, как и ожидалось, когда дело доходит до свертывания и расширения различных элементов в дереве, щелкая по элементам.

Однако.Я хочу иметь возможность кодировать элемент дерева в URL, чтобы при посещении URL-адреса и загрузке страницы элемент дерева отображался как уже развернутый.

Первый уровень элементов дерева не расширяетсяпроблема с использованием $(el).collapse("toggle") в документе, готовом, но когда он применяется к любому более низкому уровню, даже если элемент расширяется, он не виден, потому что ни один из родительских элементов не раскрывается в этой точке.

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

РЕДАКТИРОВАТЬ: образец в соответствии с запросом

Итак, скажем, если я хочу, чтобы menu1-1-1-1 расширялась при загрузке страницы, это означает menu1-1-1, menu1-1 и menu1 (родители # menu1-1-1-1 в дереве) все должны быть расширены. 

<nav>
  <ul>
    <li>
      <a href="#menu1" data-toggle="collapse" aria-expanded="false">Menu 1</a>
      <ul id="menu1" class="collapse">
        <li>
          <a href="#menu1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1</a>
          <ul id="menu1-1" class="collapse">
            <li>
              <a href="#menu1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1</a>
              <ul id="menu1-1-1" class="collapse">
                <li>
                  <a href="#menu1-1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1.1</a>
                  <ul id="menu1-1-1-1" class="collapse">
                    <li>Item a</li>
                    <li>Item b</li>
                  </ul>
                </li>
                <li>Item c</li>
                <li>Item d</li>
              </ul>
            </li>
            <li>Item e</li>
            <li>Item f</li>
          </ul>
        </li>
        <li>
          <a href="#menu1-2" data-toggle="collapse" aria-expanded="false">Menu 1.2</a>
          <ul id="menu1-2" class="collapse">
            </li>Item g</li>
            </li>Item h</li>
          </ul>
        </li>
        <li>Item i</li>
        <li>Item j</li>
      </ul>
    </li>
    <li>
      <a href="#menu2" data-toggle="collapse" aria-expanded="false">Menu 2</a>
      <ul id="menu2" class="collapse">
        <li>
          <a href="#menu2-1" data-toggle="collapse" aria-expanded="false">Menu 2.1</a>
          <ul id="menu2-1" class="collapse">
            <li>Item k</li>
            <li>Item l</li>
          </ul>
        </li>
        <li>Item m</li>
        <li>Item n</li>
      </ul>
    </li>
  </ul>
</nav>

1 Ответ

0 голосов
/ 08 октября 2018

Привет, если я правильно понимаю, что вы хотите, это что-то вроде этого: 

$('#idtree .collapse').collapse('show');

Не могли бы вы предоставить нам HTML и CSS или небольшой пример?

...