手风琴图标展开

Question

＆＃13;

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我使用以下脚本 http://uniondesign.ca/wp-content/uploads/2012/09/accordion-demo.html 并且如果任何手风琴打开则添加箭头图标n基于手风琴打开n关闭但是一旦所有手风琴都关闭我就被卡住了我的图标没有旋转。

还附上截图以了解更多详情

Error Screenshot

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

}）;

Fiddle