创建手风琴/可折叠触发器的功能

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>

创建手风琴/可折叠触发器的功能

Function to create accordion / collapsible trigger

javascript

jquery

function

accordion