jQuery折叠风琴
这个效果用jQuery做是很方便的，根本不需要搞得很复杂。
网上有些效果DEMO不仅用了jQuery还引用一两个封装文件，真是匪夷所思。
最初想到了toggle:
jQuery(document).ready(function() {
//初始化第一个默认显示：
jQuery("#list_content_list .firstblock").css({display:"block"});
jQuery("#list_content_list .firstshow").find('.pparrow').attr({src:"images/pparrowup.jpg"});
jQuery("#list_content_list a.l1").click(function() {
jQuery(this).siblings().slideToggle('slow');
jQuery(this).parent().siblings().find('ul.side2').hide();
return false;
});
//标题上一个箭头图片的变换，点击的时候来回切换SRC：
jQuery("#list_content_list a.l1").toggle(
function () {
//这里其实还需要重置所有的箭头来使旧的点击过的箭头复原。
jQuery(this).parent().siblings().find('.pparrow').attr({src:"images/pparrowdown.jpg"});
jQuery(this).find('.pparrow').attr({src:"images/pparrowup.jpg"});
},
function () {
jQuery(this).parent().siblings().find('.pparrow').attr({src:"images/pparrowup.jpg"});
jQuery(this).find('.pparrow').attr({src:"images/pparrowdown.jpg"});
}
);
});
凌乱的逻辑
后来我想通了，既然有toggle还要click事件干嘛咧？（大误！）
jQuery(document).ready(function() {
jQuery("#list_content_list a.l1").css({cursor:"pointer"});
jQuery("#list_content_list a.l1").toggle(
function () {
jQuery(this).siblings().slideToggle('normal');
jQuery(this).parent().siblings().find('ul.side2').hide();
jQuery(this).parent().siblings().find('.pparrow').attr({src:"images/pparrowdown.jpg"});
jQuery(this).find('.pparrow').attr({src:"images/pparrowup.jpg"});
},
function () {
jQuery(this).siblings().slideToggle('normal');
jQuery(this).parent().siblings().find('ul.side2').hide();
jQuery(this).parent().siblings().find('.pparrow').attr({src:"images/pparrowup.jpg"});
jQuery(this).find('.pparrow').attr({src:"images/pparrowdown.jpg"});
}
);
});
错误的逻辑
其实是有click还要toggle干嘛咧！来来回回变完全脱离用户意识了，又会再现不按规律出牌的BUG。
jQuery(document).ready(function() {
jQuery("#list_content_list a.l1").css({cursor:"pointer"});
jQuery("#list_content_list a.l1").click(
function () {
jQuery(this).siblings().slideToggle('normal');
jQuery(this).parent().siblings().find('ul.side2').hide();
jQuery(this).parent().siblings().find('.pparrow').attr({src:"images/pparrowdown.jpg"});
jQuery(this).find('.pparrow').attr({src:"images/pparrowup.jpg"});
}
);
});
但是这样，箭头还是只有在点其他东西的时候复原。点自己却不会复原了。
这时我又想到了toggle,万恶的toggle啊，还是会脱离用户体验啊！
最终灵机一动，终于摈弃了腐朽的思维：为什么不作判断呢...
完美的版本终于出世：
jQuery(document).ready(function() {
jQuery("#list_content_list a.l1").css({cursor:"pointer"});
jQuery("#list_content_list a.l1").click(
function () {
jQuery(this).siblings().slideToggle('normal');
jQuery(this).parent().siblings().find('ul.side2').hide();
jQuery(this).parent().siblings().find('.pparrow').attr({src:"images/pparrowdown.jpg"});
if(jQuery(this).find('.pparrow').attr('src')=="images/pparrowdown.jpg"){
jQuery(this).find('.pparrow').attr({src:"images/pparrowup.jpg"});
}
else{
jQuery(this).find('.pparrow').attr({src:"images/pparrowdown.jpg"});
}
}
);
});
如果有三级菜单的话，比如三级菜单ul的class是side3:
jQuery(document).ready(function() {
jQuery("#list_content_list a.l1").click(function() {
jQuery(this).siblings().slideToggle('slow');
jQuery(this).siblings().find('ul.side3').hide();//如果有三级菜单的话
jQuery(this).parent().siblings().find('ul.side2,ul.side3').hide();
return false
});
});
如果要一打开的时候第一个就能展开，就加上两句初始化：
//附上特殊的class分别控制点击部分（本例中l1）和下拉部分（本例中side2）
jQuery("#list_content_list .firstblock").slideToggle('slow');
jQuery("#list_content_list .firstshow").find('.pparrow').attr({src:"images/pparrowup.jpg"});
谁知道交差的时候，项目管理说，你还是全部折叠起来吧。PSD只是给你看里面是什么样子。。。
不过，先做出来以备后患倒是不算白费功夫。
HTML样例：
<body>
<ul id="list_content_list"> <li class="L1"> <a href="1" class="l1"><img src="data:images/yamaha_0828_03.jpg" width="765" height="123" /></a> <ul class="side2" style="display:none"> <li class="L2"> <a href="products/list?category_id=2" class="l2">数字调音台</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/18" class=" l3">PM5D,PM5D-RH</a></li> <li class="L3"><a href="products/17" class=" l3">DSP5D</a></li> <li class="L3"><a href="products/197" class=" l3">CL 系列</a></li> <li class="L3"><a href="products/16" class=" l3">M7CL-48ES / 48 / 32</a></li> <li class="L3"><a href="products/15" class=" l3">LS9-32,LS9-16</a></li> <li class="L3"><a href="products/14" class=" l3">DM2000VCM</a></li> <li class="L3"><a href="products/7" class=" l3">DM1000VCM</a></li> <li class="L3"><a href="products/6" class=" l3">02R96VCM</a></li> <li class="L3"><a href="products/191" class=" l3">01V96i</a></li> <li class="L3"><a href="products/2" class=" l3">IMX644</a></li> <li class="L3"><a href="products/5" class=" l3">01V96VCM（停产）</a></li> <li class="L3"><a href="products/20" class="nobottomline l3">PM1DV2（停产）</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=3" class="l2">模拟调音台</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/194" class=" l3">MGP系列</a></li> <li class="L3"><a href="products/28" class=" l3">MG32/14FX,MG24/14FX</a></li> <li class="L3"><a href="products/27" class=" l3">MG206C,MG206C-USB</a></li> <li class="L3"><a href="products/26" class=" l3">MG166CX,MG166CX-USB</a></li> <li class="L3"><a href="products/25" class=" l3">MG166C,MG166C-USB</a></li> <li class="L3"><a href="products/24" class=" l3">MG124C,MG124CX</a></li> <li class="L3"><a href="products/23" class=" l3">MG102C</a></li> <li class="L3"><a href="products/170" class=" l3">MG82CX</a></li> <li class="L3"><a href="products/21" class=" l3">IM8-40, IM8-32, IM8-24 </a></li> <li class="L3"><a href="products/22" class="nobottomline l3">PM5000（停产）</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=4" class="l2">带功放调音台</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/30" class=" l3">EMX5016CF</a></li> <li class="L3"><a href="products/29" class="nobottomline l3">EMX5014C</a></li> </ul>
</li> </ul>
</li> <li class="L1"> <a href="6" class="l1"><img src="data:images/yamaha_0828_12.jpg" width="765" height="123" /></a> <ul class="side2" style="display:none"> <li class="L2"> <a href="products/list?category_id=7" class="l2">TXn系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/51" class=" l3">TX6n</a></li> <li class="L3"><a href="products/176" class=" l3">TX5n</a></li> <li class="L3"><a href="products/177" class="nobottomline l3">TX4n</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=8" class="l2">Tn系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/171" class=" l3">T5n</a></li> <li class="L3"><a href="products/50" class=" l3">T4n</a></li> <li class="L3"><a href="products/172" class="nobottomline l3">T3n</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=9" class="l2">PC-1N系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/49" class=" l3">PC9501N</a></li> <li class="L3"><a href="products/48" class=" l3">PC6501N</a></li> <li class="L3"><a href="products/47" class=" l3">PC4801N</a></li> <li class="L3"><a href="products/46" class=" l3">PC3301N</a></li> <li class="L3"><a href="products/45" class="nobottomline l3">PC2001N</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=10" class="l2">XP系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/44" class=" l3">XP7000</a></li> <li class="L3"><a href="products/43" class=" l3">XP5000</a></li> <li class="L3"><a href="products/40" class=" l3">XP3500</a></li> <li class="L3"><a href="products/42" class=" l3">XP2500</a></li> <li class="L3"><a href="products/41" class="nobottomline l3">XP1000</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=11" class="l2">P-S系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/39" class=" l3">P7000S</a></li> <li class="L3"><a href="products/38" class=" l3">P5000S</a></li> <li class="L3"><a href="products/37" class=" l3">P3500S</a></li> <li class="L3"><a href="products/36" class="nobottomline l3">P2500S</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=47" class="l2">XH系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/174" class="nobottomline l3">XH200</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=12" class="l2">多通道功放</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/204" class=" l3">XMV 系列</a></li> <li class="L3"><a href="products/35" class=" l3">XM4180</a></li> <li class="L3"><a href="products/34" class=" l3">XM4080 </a></li> <li class="L3"><a href="products/33" class="nobottomline l3">IPA8200</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=48" class="l2">功放控制设备</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/175" class=" l3">ACD1</a></li> <li class="L3"><a href="products/154" class="nobottomline l3">ACU16-C</a></li> </ul>
</li> </ul>
</li> <li class="L1"> <a href="14" class="l1"><img src="data:images/yamaha_0828_36.jpg" width="765" height="123" /></a> <ul class="side2" style=""> <li class="L2"> <a href="products/list?category_id=15" class="l2">工程系列音箱</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/110" class=" l3">IF2112(M)</a></li> <li class="L3"><a href="products/109" class=" l3">IF2208</a></li> <li class="L3"><a href="products/108" class=" l3">IS1215</a></li> <li class="L3"><a href="products/107" class=" l3">IF3115</a></li> <li class="L3"><a href="products/106" class=" l3">IH2000</a></li> <li class="L3"><a href="products/105" class=" l3">IL1115</a></li> <li class="L3"><a href="products/104" class=" l3">IS1118</a></li> <li class="L3"><a href="products/103" class=" l3">IS1218</a></li> <li class="L3"><a href="products/102" class=" l3">IF2108,IF2108W</a></li> <li class="L3"><a href="products/100" class=" l3">IF2205,IF2205W</a></li> <li class="L3"><a href="products/98" class=" l3">IF2115(M)</a></li> <li class="L3"><a href="products/97" class=" l3">IF2112AS</a></li> <li class="L3"><a href="products/96" class="nobottomline l3">IF2115AS</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=16" class="l2">Club V音箱 C系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/95" class=" l3">C215V</a></li> <li class="L3"><a href="products/94" class=" l3">CM15V</a></li> <li class="L3"><a href="products/93" class=" l3">CW218V</a></li> <li class="L3"><a href="products/92" class=" l3">C115VA</a></li> <li class="L3"><a href="products/91" class=" l3">C112VA</a></li> <li class="L3"><a href="products/90" class=" l3">CW118V</a></li> <li class="L3"><a href="products/89" class=" l3">CW115V</a></li> <li class="L3"><a href="products/88" class=" l3">CM12V</a></li> <li class="L3"><a href="products/87" class=" l3">CM10V</a></li> <li class="L3"><a href="products/86" class=" l3">C115V</a></li> <li class="L3"><a href="products/85" class="nobottomline l3">C112V</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=17" class="l2">Club V音箱 S系列</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/84" class=" l3">S215V</a></li> <li class="L3"><a href="products/83" class=" l3">S115V</a></li> <li class="L3"><a href="products/82" class=" l3">S112V</a></li> <li class="L3"><a href="products/81" class=" l3">SM15V</a></li> <li class="L3"><a href="products/80" class=" l3">SM12V</a></li> <li class="L3"><a href="products/79" class=" l3">SM10V</a></li> <li class="L3"><a href="products/78" class=" l3">SW218V</a></li> <li class="L3"><a href="products/77" class=" l3">SW118V</a></li> <li class="L3"><a href="products/76" class="nobottomline l3">SW115V</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=18" class="l2">A系列音箱</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/75" class=" l3">A10</a></li> <li class="L3"><a href="products/74" class=" l3">A12</a></li> <li class="L3"><a href="products/73" class=" l3">A15</a></li> <li class="L3"><a href="products/72" class=" l3">A12M</a></li> <li class="L3"><a href="products/71" class="nobottomline l3">A15W</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=19" class="l2">R系列音箱</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/70" class=" l3">R215</a></li> <li class="L3"><a href="products/69" class=" l3">R115</a></li> <li class="L3"><a href="products/68" class=" l3">R112</a></li> <li class="L3"><a href="products/67" class=" l3">R15MC</a></li> <li class="L3"><a href="products/66" class=" l3">R12M</a></li> <li class="L3"><a href="products/65" class="nobottomline l3">R118W</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=21" class="l2">DSR系列有源音箱</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/57" class=" l3">DSR112</a></li> <li class="L3"><a href="products/56" class=" l3">DSR115</a></li> <li class="L3"><a href="products/55" class=" l3">DSR215</a></li> <li class="L3"><a href="products/54" class="nobottomline l3">DSR118W</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=53" class="l2">DXR/DXS系列有源音箱</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/193" class=" l3">DXR系列</a></li> <li class="L3"><a href="products/192" class="nobottomline l3">DXS系列</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=49" class="l2">MSR系列有源音箱</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/178" class=" l3">MSR400</a></li> <li class="L3"><a href="products/179" class=" l3">MSR250</a></li> <li class="L3"><a href="products/181" class="nobottomline l3">MSR800W</a></li> </ul>
</li> <li class="L2"> <a href="products/list?category_id=20" class="l2">有源监听音箱</a> <ul class="side3" style="display:none"> <li class="L3"><a href="products/62" class=" l3">MSP7 STUDIO</a></li> <li class="L3"><a href="products/63" class=" l3">MSP5 STUDIO</a></li> <li class="L3"><a href="products/64" class=" l3">MSP3</a></li> <li class="L3"><a href="products/61" class=" l3">SW10 STUDIO</a></li> <li class="L3"><a href="products/208" class=" l3">HS8</a></li> <li class="L3"><a href="products/207" class=" l3">HS7</a></li> <li class="L3"><a href="products/206" class=" l3">HS5</a></li> <li class="L3"><a href="products/209" class=" l3">HS8S</a></li> <li class="L3"><a href="products/58" class=" l3">HS80M</a></li> <li class="L3"><a href="products/59" class=" l3">HS50M</a></li> <li class="L3"><a href="products/60" class="nobottomline l3">HS10W</a></li> </ul>
</li> <li class="L2"> <span class="L2on">商用音箱系列</span> <ul class="side3" style=""> <li class="L3"><a href="products/202" class=" l3">VXC 系列（ART COLLECTION）</a></li> <li class="L3"><a href="products/201" class=" l3">VXS 系列（ART COLLECTION）</a></li> <li class="L3"><a href="products/168" class=" l3">VS6,VS6W（ART COLLECTION）</a></li> <li class="L3"><a href="products/169" class=" l3">VS4,VS4W（ART COLLECTION）</a></li> <li class="L3"><a href="products/53" class=" l3">NS-AW992</a></li> <li class="L3"><a href="products/52" class=" l3">S5</a></li> <li class="L3"><a href="products/182" class=" l3">S55</a></li> <li class="L3"><a href="products/183" class="nobottomline l3">S15</a></li> </ul>
</li> </ul>
</li> </ul>
</body>
jQuery折叠风琴的更多相关文章
- [jquery]折叠指定条件的表格
最近在做财务报表时候,一些表格要做特定折叠效果 这里通过2个自定义属性来对表格之间的属性作关联 date-head和date-num,输出表格时候,可以按照这2个自定义属性给某些带父子层级关系的内容指 ...
- 【转】Jquery折叠效果
转自:http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html <!DOCTYPE html PUBLIC "-// ...
- jQuery --- 第四期 (jQuery动效)
学习笔记 1.jQuery动画的淡入淡出 <!doctype html> <html> <head> <meta charset="utf-8&qu ...
- YII插件
dropDownList: Yii中可以采用CHtml类来实现,也可以用CActiveForm来实现.一.用CHtml来实现.VIEW中实现: <?php echo CHtml::dropDow ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- jQuery网站顶部定时折叠广告
效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】
今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- jQuery实现折叠下拉效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- MySQL Handling of GROUP BY--官方文档
In standard SQL, a query that includes a GROUP BY clause cannot refer to nonaggregated columns in th ...
- 利用 Lua 实现 App 动态化方案
因为动态化的东西我第一次看实现方案的源码,而且目前还是大三的学生,缺少很多实践经验说错的地方还请原谅,也希望能指出,被告知.想了很久还是决定写出来,求大神勿喷. 并且我的一个朋友bestswifter ...
- Eclipse3.7默认字体修改-找回Courser-New字体
1.找到jFace并用WinRAR打开之: jFace的具体位置:$Eclipse目录$/plugins/org.eclipse.jface_3.7.0.I20110522-1430.jar,找到后, ...
- web前端开发随手笔记 - 持续更新
本文仅为个人常用代码整理,供自己日常查阅 html 浏览器内核 <!--[if IE]><![endif]--> <!--[if IE 6]><![endif ...
- 查询两个日期(时间)以内的数据，between and 或 and 连>= <=，to_date()
between and 方法 select * from kk.kkhmd where larq between(to_date('2008-9-3','yyyy-mm-dd')) and (to_d ...
- 动软代码生成器三层用于winform
DBUtility项目中的DbHelperSQL.cs (找自己对应的数据库类型) 修改前20行中的数据库连接字符串获取方式为: //数据库连接字符串(web.config来配置),多数据库可使用Db ...
- C++中extern关键字使用（转）
参考文章:http://blog.csdn.net/sruru/article/details/7951019 chapter1.如何混合编译C语言和C++ 实际开发过程中,C++中会调用C与语言编写 ...
- POJ 2112.Optimal Milking （最大流）
时间限制:2s 空间限制:30M 题意: 有K台挤奶机(编号1~K),C头奶牛(编号K+1~K+C),给出各点之间距离.现在要让C头奶牛到挤奶机去挤奶,每台挤奶机只能处理M头奶牛,求使所走路程最远的奶 ...
- java的动态绑定与双分派(规避instanceof)
1. 动态绑定的概念 指程执行期间(而不是在编译期间)判断所引用对象的实际类型,根据其实际的类型调用其相应的方法 . 例如: package org.demo.clone.demo; public c ...
- 关于Asp.Net中避免用户连续多次点击按钮，重复提交表单的处理
Web页面中经常碰到这类问题,就是客户端多次点击一个按钮或者链接,导致程序出现不可预知的麻烦. 客户就是上帝,他们也不是有意要给你的系统造成破坏,这么做的原因很大一部分是因为网络慢,点击一个操作之后, ...