您的位置：首页 > Web前端 > JQuery

jquery手风琴效果

2020-03-29 13:00 736 查看

手风琴下拉菜单，默认打开第一个，展开时仅展开一个，其他会收缩。需要处理的关系是隔行的

<body>
<h1>使用“高度动画”实现“手风琴”组件</h1>
<div class="accordion">
<div class="title">《西游记》简介</div>
<div class="content fade in">一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi?	</div>
<div class="title">《水浒传》简介</div>
<div class="content fade">105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
<div class="title">《红楼梦》简介</div>
<div class="content fade">一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//隐藏第一个.content之后的剩余.content
$(".content:gt(0)").hide();
//为整个.accordion绑定单击事件,只允许.title的元素触发单击事件
$(".accordion").on("click",".title",function(){
let $content = $(this).next();
//如果自己旁边的.content是显示的
if($content.is(":visible")){
//只要关闭自己旁边的.content
$content.slideUp();
}else{
//否则(自己旁边的是关着的)
//先关闭自己旁边的.content
$content.slideDown()
//再关闭兄弟中其他的.content
.siblings(".content").slideUp();
}
})
</script>
</body>

转载大佬的手风琴实现，他的不是隔行

  • 点赞
  • 收藏
  • 分享
  • 文章举报
qq_44801336 发布了54 篇原创文章 · 获赞 5 · 访问量 750 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航