Раскрытие списка боковой панели, если его дочерний список активен с использованием jQuery

Question

У меня есть список с подсписками.Только родитель активных подсписков должен быть расширен, а остальная часть списка должна быть сокращена.

<ul>
  <li><a href="A.html">A</a>
    <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><a href="B.html">B</a>
    <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><a href="C.html">C</a>
    <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>

Вот скриншот того, что я имею в виду.

Answer 1

Попробуйте подписку

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

<ul>
        <li class="dropdown dropbtn"><a href="A.html">A</a>
            <ul class="dropdown-content">
                <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>
         <br/>
         <li class="dropdown dropbtn"><a href="B.html">B</a>
            <ul class="dropdown-content">
               <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>
       <br/>
       <li class="dropdown dropbtn"><a href="C.html">C</a>
           <ul class="dropdown-content">
              <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>

Для получения дополнительной информации посетите Hoverable Dropdown

Answer 2

Вы можете сделать это, используя jQuery в простой логике. Вот что я сделал, надеюсь, это поможет вам.

$('li:has(ul)').click(function(event){
  if (this == event.target) {
    $(this).children().toggle('fast');
  }
}).children().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul>
        <li>A<a href="A.html"></a>
            <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 >B<a href="B.html"></a>
            <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 >C<a href="C.html"></a>
           <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>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
     </ul>
</body>
</html>

Answer 3

jQuery(function($){
       $(".menu-sidebar li a").click(function(event){
          event.preventDefault();
          $('.child-ul').hide();
          $(this).next('ul').show();
       });
     });
   

 .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>

Answer 4

Посмотрите на :focus-within css selector https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within