如何解决创建手风琴/可折叠触发器的功能
我有以下几点:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。