jquery实现手风琴展开效果

手风琴模式实现方式：
dom层代码：

 <div class="accordionWrap"><div class="wrap"><div class="title"><span>内容一</span><span class="arrow slideTog"></span></div><div class="accordionCon"><div><p>锦瑟无端五十弦，一弦一柱思华年。</p><p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p><p>沧海月明珠有泪，蓝田日暖玉生烟。</p><p>此情可待成追忆？只是当时已惘然。</p></div><div class="moreCon" style="display:none"><p>相见时难别亦难，东风无力百花残。</p><p>春蚕到死丝方尽，蜡炬成灰泪始干。</p><p>晓镜但愁云鬓改，夜吟应觉月光寒。</p><p>蓬山此去无多路，青鸟殷勤为探看。</p></div></div></div><div class="wrap"><div class="title"><span>内容一</span><span class="arrow slideTog"></span></div><div class="accordionCon"><div><p>锦瑟无端五十弦，一弦一柱思华年。</p><p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p><p>沧海月明珠有泪，蓝田日暖玉生烟。</p><p>此情可待成追忆？只是当时已惘然。</p></div><div class="moreCon" style="display:none"><p>相见时难别亦难，东风无力百花残。</p><p>春蚕到死丝方尽，蜡炬成灰泪始干。</p><p>晓镜但愁云鬓改，夜吟应觉月光寒。</p><p>蓬山此去无多路，青鸟殷勤为探看。</p></div></div></div><div class="wrap"><div class="title"><span>内容一</span><span class="arrow slideTog"></span></div><div class="accordionCon"><div><p>锦瑟无端五十弦，一弦一柱思华年。</p><p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p><p>沧海月明珠有泪，蓝田日暖玉生烟。</p><p>此情可待成追忆？只是当时已惘然。</p></div><div class="moreCon" style="display:none"><p>相见时难别亦难，东风无力百花残。</p><p>春蚕到死丝方尽，蜡炬成灰泪始干。</p><p>晓镜但愁云鬓改，夜吟应觉月光寒。</p><p>蓬山此去无多路，青鸟殷勤为探看。</p></div></div></div></div>

css代码：

 .accordionWrap{width: 218px;background:#1890ff;border-radius: 4px;position:absolute;left: 10px;top: 50px;padding: 10px;box-sizing: border-box;.wrap{line-height: 18px;.title{span{font-size: 12px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #fff;}.arrow{width: 12px;height: 7px;background:url("../img/arrow.svg") no-repeat;background-size: 100% 100%;float:right;margin-top: 5px;transform: rotate(180deg);cursor: pointer;transition: all 0.5s;}.slideTogExchange {width: 12px;height: 7px;background: url('../img/arrow.svg') no-repeat;background-size: 100% 100%;float:right;margin-top: 10px;cursor: pointer;transform: rotate(0deg);}}.accordionCon{border-top: 1px dashed #45fff8;border-bottom: 1px solid #dddddd;p{font-size: 12px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #fff;}.moreCon{p{color: #45FFF8 !important;}}}}}

js操作dom的时候一定要注意层级之间的关系

 $(function () {// 点击箭头展开隐藏的内容$(".slideTog").click(function () {var hasClass = $(this).hasClass('slideTogExchange')if (hasClass) {$(this).parent().siblings('.accordionCon').children('.moreCon').slideUp()$(this).removeClass('slideTogExchange')} else {           $(this).parent().siblings('.accordionCon').children('.moreCon').slideDown()$(this).addClass('slideTogExchange')}       $(this).parents('.wrap').siblings('.wrap').children('.accordionCon').children('.moreCon').slideUp().removeClass('slideTogExchange')     $(this).parents('.wrap').siblings('.wrap').find('.slideTog').removeClass('slideTogExchange')});})

实现效果如下：

jquery实现手风琴展开效果相关推荐

jQuery侧边栏手风琴菜单效果(1+X Web前端开发初级例题)
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
jQuery实现手风琴效果
jQuery实现手风琴效果,这里是纵向的,效果图如下: 在此处是当鼠标移动到p上面的时候,p下面的ol里面的内容显现出来主要用了html,css,jQuery的知识先把大致需要的东西写出来,此处用 ...
jQuery 文本段落展开和折叠效果
找了几个感觉这个效果是最好的,最简单的. jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv=" ...
小猿圈用jQuery实现手风琴图片展示效果
对web前端了解的同学会知道jQuery是现在前端中使用的框架之一,但是你知道jQuery可以做到一些你意想不到的效果吗?下面小猿圈web前端老师用jQuery实现手风琴图片展示效果,希望对你有所帮助 ...
jQuery自制手风琴效果增强版(附实现原理)
手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101 ...
jQuery实际案例③——手风琴的效果
如图,用最简单的方式实现手风琴的效果,核心,就是通过改变自身即鼠标移上去的那张图的width,与其他的width就可,但是需要用animate,先改变自己的width,再改变其他的. 转载于:http ...
横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...

jquery实现手风琴展开效果

jquery实现手风琴展开效果相关推荐

最新文章

热门文章