jquery实现手风琴展开效果_jquery_

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

 .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;             }         }         }     }  }

 $(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')         });     })