带扩展图标的手风琴

Question

 $(document).ready(function($) { $('#accordion').find('.accordion-toggle').addClass('icon-rotate'); $('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate'); $('#accordion').find('.accordion-toggle').click(function(e) { $(this).next().slideToggle().addClass('expanded').prev('h4').removeClass('icon-rotate'); $(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate'); }); }); 

 /* Accordion - Left Panel */ /* line 4, ../sass/my-request.scss */ .filter-panel .accordion-header { background: #506070; color: #FFF; font-size: 16px; padding: 15px; font-weight: 600; } /* line 11, ../sass/my-request.scss */ .filter-panel .accordion-toggle-first { cursor: pointer; margin: 0; font-size: 14px; color: #333; background: #F6F6F6; padding: 15px 20px; font-weight: 600; border: 1px solid #DEDEDE; border-top: 0; } /* line 22, ../sass/my-request.scss */ .filter-panel .accordion-toggle { cursor: pointer; margin: 0; font-size: 14px; color: #333; background: #F6F6F6; padding: 11px 20px; font-weight: 600; border: 1px solid #DEDEDE; border-top: 0; } /* line 33, ../sass/my-request.scss */ .filter-panel .accordion-content { display: none; font-weight: 600; border: 1px solid #DEDEDE; border-top: 0; } /* line 39, ../sass/my-request.scss */ .filter-panel .accordion-content ul li { padding: 10px 30px; } /* line 42, ../sass/my-request.scss */ .filter-panel .accordion-content.default { display: block; } /* line 45, ../sass/my-request.scss */ .icon-rotate span { transform: rotate(90deg); transition: .25s; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion" class="filter-panel"> <div class="accordion-header">Refine by:</div> <div class="accordion-toggle-first">All</div> <h4 class="accordion-toggle">Active <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content default"> <ul> <li> <div class="align-left">Pending DSL (12)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending ECR (21)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending OSI (10)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending OWS (6)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending Requestor (10)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> </ul> </div> <h4 class="accordion-toggle">Closed <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> <ul> <li>Cancelled (21)</li> <li>Rejected (14)</li> <li>Completed (21)</li> </ul> </div> <h4 class="accordion-toggle">Type <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> <ul> <li>Alias (13)</li> <li>Sites (15)</li> <li>Domain (19)</li> <li>Social Media (9)</li> <li>Archive/Back-up (21)</li> <li>Mobile App (6)</li> </ul> </div> <h4 class="accordion-toggle">VPU <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> <ul> <li>Africa (23)</li> <li>East Asia Pacific (15)</li> <li>South Asia (19)</li> <li>Latin America (9)</li> </ul> </div> <h4 class="accordion-toggle">Date <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> &nbsp; </div> </div> 

我正在使用以下脚本http://uniondesign.ca/wp-content/uploads/2012/09/accordion-demo.html并添加箭头图标（如果打开了任何手风琴）n根据手风琴打开n进行了更改n关闭但我被卡住了一旦所有手风琴关闭，我的图标就不会旋转。

还附有屏幕截图以获取更多详细信息

错误截图

Answer 1

我认为您可以在这种情况下使用toggleClass 。 这是我为了使演示工作而进行的更改。

$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
    $(this).toggleClass('icon-rotate').next().slideToggle().addClass('expanded');
    $(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});

}）;

小提琴