问题描述
我有以下几点:
<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”变成一个可以点击的可折叠项目(或手风琴),并且它下面的“链接列表”(包含所有链接列表项目)打开。
解决方法
您可以只使用 .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>