У меня есть список боковых панелей с подменю.Каждый элемент списка имеет ссылку на другую страницу.Я хочу, чтобы подменю расширялось на 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](https://i.stack.imgur.com/kkCmr.png)