单击移动设备后如何折叠页脚菜单的特定部分

Question

我正在尝试为移动设备创建一个响应式页脚，以便当用户单击其中一个标题时，该部分的元素展开，而另一个部分的其他元素保持折叠状态，再次点击时它会折叠。到目前为止，我只设法创建了一个功能，在单击一个所有元素后，所有元素都会展开。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div class="nav-footer">
    <div class="nav">
      <h2 class="title">Legal</h2>
      <ul class="list">
        <li>Privacy Policy</li>
        <li>Terms & Conditions</li>
      </ul>
    </div>
    <div class="nav">
      <h2 class="title">Company</h2>
      <ul class="list">
        <li>About us</li>
        <li>Mission</li>
      </ul>
    </div>
    <div class="nav">
      <h2 class="title">Assistance</h2>
      <ul class="list">
        <li>FAQ</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>
</div>

CSS

.list {
  max-height: 0; 
  overflow:hidden; 
  transition: max-height 1s ease-out;
}

.title {
  cursor: pointer;
}

.test {
  height:auto; 
  max-height: 500px; 
  transition: max-height 0.5s ease-in !important;
}

JS

jQuery(" h2").click(function(){
    $("ul").toggleClass("test");
});

预先感谢您的宝贵时间！

Answer 1

您可以使用 $(this).next("ul").toggleClass("test"); 查找与您的 h2“相关”的 ul。

演示

jQuery(" h2").click(function(){
    $(this).next("ul").toggleClass("test");
});

.list {
  max-height: 0; 
  overflow:hidden; 
  transition: max-height 1s ease-out;
}

.title {
  cursor: pointer;
}

.test {
  height:auto; 
  max-height: 500px; 
  transition: max-height 0.5s ease-in !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="nav-footer">
    <div class="nav">
      <h2 class="title">Legal</h2>
      <ul class="list">
        <li>Privacy Policy</li>
        <li>Terms & Conditions</li>
      </ul>
    </div>
    <div class="nav">
      <h2 class="title">Company</h2>
      <ul class="list">
        <li>About us</li>
        <li>Mission</li>
      </ul>
    </div>
    <div class="nav">
      <h2 class="title">Assistance</h2>
      <ul class="list">
        <li>FAQ</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>
</div>

单击移动设备后如何折叠页脚菜单的特定部分

How to collapse a specific section of footer menu after click on mobile

html

javascript

css

jquery

footer