jQuery手风琴菜单

第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家

手风琴的排版


排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你心中所想的一片天!!!


我没有用js原生写,个人比较喜欢jQuery,因为jQuery写出来的代码比较简洁,接下来就该写效果了,既然我们用的是jQuery,那么就应该先把jQuery的文件先引进来,才可以进行下面的工作。。

jQuery代码里我们用了很多的单词在原生里没有见过,接下来我就给大家把每个单词的意思卸载下面,可以让大众一面了然
  1. nextAll 查找当前元素之后所有的同辈元素。
  2. slideDown 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
  3. end回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
  4. parent 取得一个包含着所有匹配元素的唯一父元素的元素集合。
  5. siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
  6. children 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
  7. hide 隐藏显示的元素

以上就是所有的代码以及代码jQuery里单词的意思,上边都了解了,那接下来就看看最后的效果吧!!!

上边提到了很多电视剧的名字,本人比较喜欢的几部电视剧,代码敲完了,就到开心的时候了,回顾一下几部电视剧的精彩片段吧!!

三生三世 看看你夜华浅浅的虐死单身狗

琅琊榜 看看帅气的梅长苏

择天记 看看我们帅气的陈长生

外科风云 看看庄恕和陆晨曦的花式虐狗

回顾完电视剧,就回归正轨吧,哈哈!!!!
实际开发中效率还是最重要的,因为现在浏览器的性能已经非常好了,所以jQ的有些缺点完全可以忽略不计啦,并且jQ的兼容性真的是不错的,能节省开发人员很多的时间和精力,我也很支持在工作项目中用jQ来开发,可是作为一个真正的前端技术人员,你要时刻了解底层代码的实现,这样随着科技的发展,你也不会落于人后。

jQuery手风琴菜单!!!!的更多相关文章

  1. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  2. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  3. jQuery 手风琴侧边菜单

    动手做了一个简单手风琴菜单,上图: 点击 B 可收缩 C 列表,点击 C 改变自身和父节点 B 的样式,悬浮时均有不同的样式改变. 先看页面代码,列表的嵌套: <div id="men ...

  4. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  5. UIKit的手风琴菜单,单条展开和多条同时展开

    这个也要进来看看哈. 记得加多个属性时的用法就可以了. 因为官网提供太多的SAPMLE啦.. http://www.getuikit.net/docs/accordion.html <div c ...

  6. jQuery手风琴制作

    jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...

  7. html5 手风琴菜单

    因为项目需要,现在需要做个手风琴菜单,于是自己就瞎整了一下,所用只是less.js  javascript  jquery效果如图: 具体代码如下: <!DOCTYPE html> < ...

  8. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  9. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

随机推荐

  1. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  2. 老李分享:大数据框架Hadoop和Spark的异同 2

    Spark数据处理速度秒杀MapReduce Spark因为其处理数据的方式不一样,会比MapReduce快上很多.MapReduce是分步对数据进行处理的: ”从集群中读取数据,进行一次处理,将结果 ...

  3. 老李分享:天使投资 vs. 风险投资 vs. 私募股权融资

    天使投资(Angel Capital) 创意阶段(idea stage)到种子阶段(seed stage) 0 – 1百万美元营业额 还没有盈利 小股东 风险异常的高 不存在负债情况 风险投资(Ven ...

  4. Influxdb1.2.2安装_Windows

    一.文件准备 1.1 文件名称 influxdb-1.2.2_windows_amd64.zip 1.2 下载地址 https://portal.influxdata.com/downloads [注 ...

  5. day002-HTML知识点总结:浏览器兼容性之指定IE浏览器使用chrome内核渲染页面

    今天再浏览大淘宝首页时,突然看到这么一个东东: ,顿时好费解,莫非万恶的IE浏览器认识到自己以往的罪孽,开始兼容chrome了??! 于是本着不懂就百度的神精,开始纵横于各大铁耙,勃哥,终于找到了许许 ...

  6. Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

  7. IC卡读卡器在安卓(android)下的开发

    友我科技推出IC卡读卡器的Android开发包,软件工程师只需要导入jar类库文件,就可以在App中操作IC卡读卡器了. 目前IC卡读卡器的Android开发包开放操作的卡类型有:M1, S50, U ...

  8. 跟着刚哥梳理java知识点——异常(十一)

    异常:将程序执行中发生的不正常情况(当执行一个程序时,如果出现异常,那么异常之后的代码就不在执行.) java.lang.Throwable:异常的超类 1.Error:java虚拟机无法解决的严重问 ...

  9. node服务成长之路

    我们的系统也从第一代平台开始到现在第四代平台更换中,对这四代平台做一个简单的介绍: 第一代平台,主要是集中式,以快速上线为目的:第二代平台主要是分布式改造,缓解各服务压力:第三代平台主要做服务端SOA ...

  10. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...