时间戳

首页 > 解决方案 > 如果使用 jQuery 的子列表处于活动状态，则侧边栏列表会展开

javascript - 如果使用 jQuery 的子列表处于活动状态，则侧边栏列表会展开

问题描述

我有一个带有子列表的列表。只有活动子列表的父级必须扩展，列表的其余部分应收缩。

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

这是我的意思的屏幕截图。

在此处输入图像描述

标签： javascriptjqueryhtmlcss

解决方案

您可以在简单的逻辑中使用 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>

推荐阅读