创建手风琴/可折叠触发器的功能[关闭]

Question

我有以下：

<div class="Footer__Block Footer__Block--links">
  <h2 class="Footer__Title Heading u-h6">
</h2>
  <ul class="Linklist">
    <li class="Linklist__Item">
    </li>
  </ul>
</div>

我想要的是“Footer__Title Heading u-h6”变成一个可以点击的可折叠项目（或手风琴），并且它下面的“链接列表”（包含所有链接列表项目）打开。

您能否为此建议一个功能？谢谢！

Answer 1

你可以使用.toggle()

$(document).ready(function() {
  $('.Footer__Title').click(function() {
    $(this).closest('.Footer__Block').find('.Linklist').toggle()
  })
})

/* Vanilla version */
/*window.addEventListener('load', () => {
  let footerTitle = document.querySelector('.Footer__Title')
  let linkList = document.querySelector('.Linklist')
  footerTitle.addEventListener('click', e => {
    linkList.classList.toggle('hidden')
  })
})
*/

.Footer__Title {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Footer__Block Footer__Block--links">
  <h2 class="Footer__Title Heading u-h6">The footer title
  </h2>
  <ul class="Linklist">
    <li class="Linklist__Item">
      Item
    </li>
  </ul>
</div>