简洁实用的BootStrap jQuery手风琴插件

编辑：宝哥软件园来源：互联网时间：2021-09-07

新天龙八部

评分

前端

html lang=' zh ' hearta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '标题简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库/titlelink rel='样式表'类型=' text/css ' href=' CSS/normalize。CSS '/link rel='样式表'类型=' text/CSS ' href=' CSS/default。CSS ' link rel='样式表'类型='text/css' href='css/jquery。手风琴。CSS '！-[if IE]脚本src=' http :http://libs。useso。com/js/html 5 shiv/3.7/html 5 shiv。量滴js '/脚本！[endif]-/header dyarticle class=' htmleaf-container ' header class=' htmleaf-header ' h1简洁实用的jQuery手风琴插件spanA jQuery手风琴插件/SPan/h1 div class=' htmleaf-link ' a class=' htmleaf-icon-htmleaf-home-outline ' href=' http://www .htmleaf。com/' title=' jQuery之家target='_blank'span jQuery之家/span/aa class=' htmleaf-icon icon-htmleaf-arrow-forward-outline ' href=' http://www .htmleaf。com/jQuery/手风琴/201510122659.html' title='返回下载页target='_blank'span返回下载页/span/a/div/header div class=' accordo ' ulli class=' item 1 active ' a href=' JavaScript : void()；111/a/Lili class=' item 2 ' a href=' JavaScript 3: void()；222/a/Lili class=' item 3 ' a href=' JavaScript 3: void()；333/a/Lili class=' item 4 ' a href=' JavaScript 3: void()；444/a/Lili class=' item 5 ' a href=' JavaScript 3: void()；555/a/Li/ul/div/article script src=' http : lib/jquery-1。11 .1 .量滴js '/script script src=' http : js/jquery。手风琴。js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function () {$(')).手风琴')。手风琴();});/script/body/html jquery。手风琴。射流研究…代码

/** jquery .手风琴0.0.1*版权所有2015年冷子玉http://lengziyu.com/*日期： 2015-10-10 */;（函数($){ $ .fn。accordion=function(opts){//默认值定义变量默认值={max: '620px '，min: '140px '，speed: '1000'}var opts=$ .扩展（默认，选择);这个。每个(函数(){ var div=$(this)，//$(').手风琴')。手风琴();表示$('.手风琴)这个元素这里是divul=div.children()，//这里表示保险商实验所元素李=ul。儿童()；//这里是里元素//alert(div.html()'、' ul.html()'、' Li。html())；//触发事件ul.find(' .主动a ').hide()；//隐藏a标签//alert(ul.find ' .主动a ').长度);/*fadeOut():淡出动画()方法执行半铸钢钢性铸铁(铸造半钢)属性集的自定义动画。该方法通过半铸钢钢性铸铁(铸造半钢)样式将元素从一个状态改变为另一个状态CSS。属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如边距：30像素).字符串值无法创建动画（比如背景色：红色').$(选择器)。动画（风格，速度，放松，回调)$(选择器)。动画（样式、选项)查找()方法获得当前元素集合中每个元素的所有第一级别后代搜索所有段落中的后代跨度元素，并将其颜色设置为红色：$('p ').查找(' span ').css('color '，' red ')；兄弟姐妹()获得匹配集合中每个元素的所有同胞（同一级)*///鼠标进入里触发ul.on('mouseenter '，' li '，function () {//$(this)表示里元素$(这个)。addClass('active ').动画({ width: opts.max }，opts.speed).查找(' a ').fadeOut().父项()。兄弟姐妹()。removeClass("活动")。动画({ width: opts.min }，opts.speed).查找(' a ').show()；})})})))(jQuery)；部分钢性铸铁样式

* { padd : 0；保证金： 0；} ul Li {列表式：无；向左浮动：}.手风琴{宽度： 1180像素飞越：隐藏；height : 375 pxmargin :0 auto }。手风琴ul li {背景-重复：不重复；向左浮动：宽度： 140像素；高度： 350像素；光标：默认值；}.手风琴ul Li。活动{宽度： 620 px}.手风琴ul。项目1 {背景图像： URL(./img/pic1。jpg)；}.手风琴ul。第2项{背景图像： URL(./img/pic2。jpg)；}.手风琴ul。第3项{背景图像： URL(./img/pic3。jpg)；}.手风琴ul。第4项{背景图片： URL(./img/pic4。jpg)；}.手风琴ul。第5项{背景图片： URL(./img/pic5。jpg)；}.手风琴保险商实验所阿利{ display:块宽度： 140像素；高度： 350像素；光标：默认值；}.手风琴ul。项目1 a {背景图像：网址(./img/pics 1。jpg)；}.手风琴ul。项目2 a {背景图像：网址(./img/pics 2。jpg)；}.手风琴ul。第3 a项{背景图像：网址(./img/pics 3。jpg)；}.手风琴ul。项目4 a {背景图像：网址(./img/pics 4。jpg)；}.手风琴ul。项目5a背景-图像：网址(./img/pics 5。jpg)；}