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

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

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

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

上边提到了很多电视剧的名字,本人比较喜欢的几部电视剧,代码敲完了,就到开心的时候了,回顾一下几部电视剧的精彩片段吧!!
三生三世 看看你夜华浅浅的虐死单身狗

琅琊榜 看看帅气的梅长苏

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

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

回顾完电视剧,就回归正轨吧,哈哈!!!!
实际开发中效率还是最重要的,因为现在浏览器的性能已经非常好了,所以jQ的有些缺点完全可以忽略不计啦,并且jQ的兼容性真的是不错的,能节省开发人员很多的时间和精力,我也很支持在工作项目中用jQ来开发,可是作为一个真正的前端技术人员,你要时刻了解底层代码的实现,这样随着科技的发展,你也不会落于人后。
jQuery手风琴菜单!!!!的更多相关文章
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
- jQuery 手风琴侧边菜单
动手做了一个简单手风琴菜单,上图: 点击 B 可收缩 C 列表,点击 C 改变自身和父节点 B 的样式,悬浮时均有不同的样式改变. 先看页面代码,列表的嵌套: <div id="men ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- UIKit的手风琴菜单,单条展开和多条同时展开
这个也要进来看看哈. 记得加多个属性时的用法就可以了. 因为官网提供太多的SAPMLE啦.. http://www.getuikit.net/docs/accordion.html <div c ...
- jQuery手风琴制作
jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...
- html5 手风琴菜单
因为项目需要,现在需要做个手风琴菜单,于是自己就瞎整了一下,所用只是less.js javascript jquery效果如图: 具体代码如下: <!DOCTYPE html> < ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- jquery右键菜单
点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...
随机推荐
- Google永远不可能回到国内,只能是回忆
今天早上在微博上无意看 [谷歌翻译App在大陆地区恢复无障碍使用]这篇文章,不知不觉就点进去看一下,内心还是比较兴奋,为什么兴奋说不清楚.或许我们是真的喜欢Google的产品. 回想2010年Goog ...
- python 爬取w3shcool的JQuery的课程并且保存到本地
最近在忙于找工作,闲暇之余,也找点爬虫项目练练手,写写代码,知道自己是个菜鸟,但是要多加练习,书山有路勤为径.各位爷有测试坑可以给我介绍个啊,自动化,功能,接口都可以做. 首先呢,我们明确需求,很多同 ...
- 什么是测试开发工程师-google的解释
什么是测试开发工程师-google的解释 “ 软件测试开发工程师[SET or Software Engineer in Test],和软件开发工程师一样是开发工程师,主要负责软件的可测试性.他们参与 ...
- ElasticSearch查询 第五篇:布尔查询
布尔查询是最常用的组合查询,不仅将多个查询条件组合在一起,并且将查询的结果和结果的评分组合在一起.当查询条件是多个表达式的组合时,布尔查询非常有用,实际上,布尔查询把多个子查询组合(combine)成 ...
- 雷达的L、S、C、X波段是什么
L.S.C.X都是电磁波波段的划分代号. 最早用于搜索雷达的电磁波波长度为23cm,这一波段被定义为L波段(英语Long的字头),后来这一波段的中心波长度变为22cm. 当波长为10cm的电磁波被使用 ...
- Bug 笔记
1.页面返回 400 Bag request: 原因:使用Spring MVC controller的时候,查询数据库:当数据库的数据类型是int型时,Spring MVC在查询的数据匹配给实体类 ...
- xxxxxxxxxxxxxx
一.Linux命令的分类 1.内部命令:属于Shell解释器的一部分 2.外部命令:独立于Shell解释器之外的程序 3.type命令,查看命令是外部命令还是内部命令: [root@www ~]# t ...
- java多线程基本概述(四)——死锁
package mytask; public class Task { public static void main(String[] args) { DeadThread thread = new ...
- 关于centos 7 systemctl自定义服务笔记
通过添加 Restart=always RestartSec=2s StartLimitBurst=10 实现systemctl服务崩溃自动重启
- redis 字符串
redis 字符串 概述 redis 没有使用 c 语言风格的字符串表示(以 "\0" 作为结尾), 而是使用自定义的 sds 结构 字符串结构 定义位置 (src/sds.h) ...