Разверните подменю на основе активного URL - PullRequest
0 голосов
/ 11 октября 2018

У меня есть список боковых панелей с подменю.Каждый элемент списка имеет ссылку на другую страницу.Я хочу, чтобы подменю расширялось на 2 условия:

  1. Когда его родительская ссылка активна, должны расширяться только его дочерние элементы.
  2. Когда активен какой-либо дочерний элемент определенного списка, разверните подменю списка на основе активного URL.

.menu-sidebar .child-ul {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul class="menu-sidebar">
  <li class="parent-li">
    <a href="A.html">A</a>
    <ul class="child-ul">
      <li><a href="../1.html">1</a></li>
      <li><a href="../2.html">2</a></li>
      <li><a href="3.html">3</a></li>
      <li><a href="../4.html">4</a></li>
      <li><a href="../5.html">5</a></li>
      <li><a href="../6.html">6</a></li>
    </ul>
  </li>
  <li class="parent-li">
    <a href="B.html">B</a>
    <ul class="child-ul">
      <li><a href="11.html">1</a></li>
      <li><a href="12.html">2</a></li>
      <li><a href="13.html">3</a></li>
      <li><a href="14.html">4</a></li>
      <li><a href="15.html">5</a></li>
      <li><a href="16.html">6</a></li>
      <li><a href="17.html">7</a></li>
      <li><a href="18.html">8</a></li>
      <li><a href="19.html">9</a></li>
      <li><a href="20.html">10</a></li>
      <li><a href="21.html">11</a></li>
    </ul>
  </li>
  <li class="parent-li">
    <a href="C.html">C</a>
    <ul class="child-ul">
      <li><a href="21.html">1</a></li>
      <li><a href="22.html">2</a></li>
      <li><a href="23.html">3</a></li>
      <li><a href="24.html">4</a></li>
      <li><a href="25.html">5</a></li>
      <li><a href="26.html">6</a></li>
      <li><a href="27.html">7</a></li>
      <li><a href="28.html">8</a></li>
      <li><a href="29.html">9</a></li>
    </ul>
  </li>
</ul>

Изображение меню и подменю -

enter image description here

1 Ответ

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

Просто создать простую функцию щелчка с помощью jQuery?

$('li').click(function(e) {
  if ($(e.target).children("ul").length) {
    //toggle the class of child
  }
});

Это было сделано миллион раз, поэтому вы сможете найти код для переключения класса

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...