十行代码实现手风琴效果

手风琴效果原理在于元素节点的隐藏与显示，只要理解了这一点思维逻辑就很清晰了。
第一步，先写出静态页面，然后加上简单的样式

<body><div><ul><li>水果</li><span><li>苹果</li><li>葡萄</li><li>芒果</li><li>西瓜</li></span><li>游戏</li><span><li>王者</li><li>吃鸡</li><li>射击</li></span><li>运动</li><span><li>篮球</li><li>足球</li><li>羽毛球</li><li>乒乓球</li></span><li>美女</li><span><li>LISA</li><li>IU</li><li>BABY</li></span></ul></div>
</body>

就是说每一个标题下面都有一个span标签来包裹每一个标题对应的内容选项，然后设置span的高度为0，以及溢出隐藏，然后使用js给标题绑定事件，控制span的高度即可实现手风琴效果

<script>$("ul>li").click(function(){if($(this).next().height() == 0){$("span").height("0px")var h = $(this).next().children().length *30$(this).next().css({height : h+"px"})}else{$(this).next().css({height : "0px"})}})
</script>

var h = $(this).next().children().length *30这一行代码的意思是为了获取当前点击标题下的span标签中内容高度，因为不同的span的内容不同有多有少，所以高度也不同，如果把高度定死的话会出现有的内容显示不出或有留白。

以上就是将span标签的高度定死的效果。

十行代码实现手风琴效果相关推荐

vue 手风琴效果_Vue实现侧边菜单栏手风琴效果实例代码
编程之家收集整理的这篇文章主要介绍了Vue实现侧边菜单栏手风琴效果实例代码,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 效果图如下所示: {{item.name}} { // 判断如 ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
PaddleHub 1.0正式发布：一键模型加载，十行代码完成迁移学习
允中发自凹非寺量子位编辑 | 公众号 QbitAI 飞桨(PaddlePaddle)核心框架Paddle Fluid v1.5已经发布,而作为其关键工具,用来迁移学习的PaddleHub也进行 ...
不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
园子中的朋友大家好.在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法.感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力.在这篇文章中我们将介绍 Accor ...
单机多节点有意义吗_十行代码让你的单机“影分身”，分布式训练速度快到飞起...
工程师:"在你辉煌的时刻,让我为你唱首歌,我的好兄弟,心里有苦你对我说." 计算机:"哥啊,那我可就说了,我是真的苦啊,现在一个模型动辄好几亿参数,数据集也是大的吓人 ...
纯css3实现美化复选框和手风琴效果（详细）
关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉 ,然后给选框绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...
java 文件递归删除文件夹_Java十行代码实现递归删除文件夹中所有文件
递归删除文件夹中所有文件要递归首先需要有方法.递归,即方法自己调用自己.一般在程序中很少使用,但在这个实现中,我们无法知道文件夹的深度,更无法根据深度来实现循环的嵌套. 递归两个重要条件: 终止边界 ...
用十行代码快速创建权限管理系统
(坚持做自己) 为了防止说是标题党,我先展示下真是就需要十行代码: 当然还有appsettings.json配置文件,和种子数据文件,这个不算代码之内. 1.项目背景介绍 Blog.Core项目开源也 ...
jQ效果：简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"><div class="item_box_wp"& ...

十行代码实现手风琴效果

十行代码实现手风琴效果相关推荐

最新文章

热门文章