【发布时间】：2019-11-13 18:08:06
【问题描述】：
我试图有一个可折叠的地方，打开时箭头从朝右变为朝下。我拥有的代码几乎可以满足我的要求，但是当我通过单击打开可折叠设备时，图标会发生变化，然后当我抬起鼠标时会立即返回右侧。我需要它保持朝下，直到我再次单击关闭可折叠。这是我的代码：
<body>
<script>
$(document).ready(function(){
$(".collapsible-body").hide();
$(".collapsible-header").click(function(){
$(this).next(".collapsible-body").slideToggle("normal");
});
});
</script>
<style>
.collapsible-header {
display:inline-block;
justify-content: space-between;
vertical-align: middle;
width: 95.8%;
margin-bottom: 2%;
padding: 15px;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
font-size: 14px;
font-weight:500;
line-height:1.4;
white-space:nowrap;
webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
color:#333;
background-color:#e8e8e8;
}
.collapsible-header:after {
font-family: 'fontawesome';
content: "\f054";
float: left;
font-size: .70em;
vertical-align: middle;
margin-right: 10px;
display: inline-block;
line-height: 1.5em;
margin-top: 4.2px;
}
.collapsible-header:active:after {
font-family: 'fontawesome';
content: "\f078";
float: left;
font-size: .70em;
vertical-align: middle;
margin-right: 10px;
display: inline-block;
line-height: 1.556em;
}
.collapsible-header.focus,
.collapsible-header:focus {
color:#333;
background: #d8d8d8 !important;
}
.active, .collapsible-header:hover {
color:#333;
background: #d8d8d8;
}
ul.collapsible {
list-style-type:none;
padding-inline-start: 0;
}
.collapsible-body {
text-align:left;
padding-top: 2%;
padding-bottom: 2%;
border-bottom: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
margin-bottom: 2%;
}
.collapsible-body p {
margin-left: 1.5%;
margin-right: 1.5%;
}
</style>
<h3>Delivering Relevant Tools and Resources</h3>
<p>Our key strength is providing an avenue for bringing together scientific information and technical research on cereal grains and related materials through its various resources. Members belong to Cereals & Grains Association to keep up-to-date on key issues through meetings and publications as well as to have opportunities for professional growth and networking with their peers. Key offerings include:</p>
<br/>
<ul class="collapsible">
<li>
<div class="collapsible-header">Cereal Chemistry</div>
<div class="collapsible-body"><p>Cereal Chemistry, a journal with peer-reviewed, original research on raw materials, processes, and products utilizing cereals, oilseeds, and pulses as well as analytical procedures and methods in the cereals area. No other journal surpasses it in the quantity and quality of juried, original research.</p></div>
</li>
<li>
<div class="collapsible-header">Cereal Foods World (CFW)</div>
<div class="collapsible-body"><p>Cereal Foods World (CFW) include feature articles and original research in a multimedia environment that focuses on advances in grain-based food science and the application of these advances on current practices in baking, snack foods, breakfast foods, and other grain-based products.</p></div>
</li>
<li>
<div class="collapsible-header">Cereals & Grains Association Books</div>
<div class="collapsible-body"><p>Cereals & Grains Association offers more than 65 titles on various food science topics plus the highly respected <i>AACC Approved Methods of Analysis, 11th Edition</i>. Some titles are technically focused while others are designed for generalists.</p></div>
</li>
<li>
<div class="collapsible-header">Annual Meeting</div>
<div class="collapsible-body"><p>The Annual Meeting draws an international audience of more than 1,000 grain-based professionals to discuss key grain science issues. The annual meeting is the primary education and networking event for professionals working in the grain-based foods industry around the world. The annual meeting also features a tradeshow composed of more than 250 exhibits.</p></div></LI>
<li>
<div class="collapsible-header">Continuing Education</div>
<div class="collapsible-body"><p><p>Continuing education programs offer quality professional development services for food industry professionals at any level in a variety of food-related industries. Courses are designed to increase skills and broaden understanding of grain-based applications.</p></div>
</li>
<li>
<div class="collapsible-header">Website</div>
<div class="collapsible-body"><p>Our website (<a href="www.cerealsgrains.org">www.cerealsgrains.org</a>) offers members the opportunity to obtain information and resources in one common location. The website features more than 40 years of searchable <I>Cereal Chemistry </I>abstracts, an online catalog of books, special reports, calendar of events, online symposia, and a searchable directory is always available to find members by geographic region or area of expertise.</p></div></LI>
<li>
<div class="collapsible-header">Technical and Administrative Committees</div>
<div class="collapsible-body"><p>Our members work together on various initiatives through technical and administrative committees. Committee participants help identify emerging issues and create definitions for critical industry ingredients, as well as investigate and validate analytical methodology.</p></div>
</li>
</ul>
</body>
【问题讨论】：
标签： javascript jquery icons