Javascript 激活后保持可折叠图标显示
我试着制作一个可折叠的，当箭头打开时，它会从右转向下。我的代码基本上满足了我的要求，但是当我点击打开可折叠文件时，图标会发生变化，然后当我抬起鼠标时，图标会立即返回到右侧。我需要它保持朝下，直到我再次点击关闭折叠。这是我的密码：Javascript 激活后保持可折叠图标显示,javascript,jquery,icons,Javascript,Jquery,Icons,我试着制作一个可折叠的，当箭头打开时，它会从右转向下。我的代码基本上满足了我的要求，但是当我点击打开可折叠文件时，图标会发生变化，然后当我抬起鼠标时，图标会立即返回到右侧。我需要它保持朝下，直到我再次点击关闭折叠。这是我的密码： <body> <script> $(document).ready(function(){ $(".collapsible-body").hide(); $(".collapsible-header").click(function
<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>
$（文档）.ready（函数（）{
$（“.collappable body”）.hide（）；
$（“.collapsable header”）。单击（函数（）{
$（此）.next（“.collablebody”）.slideToggle（“正常”）；
});
});
.可折叠收割台{
显示：内联块；
证明内容：之间的空间；
垂直对齐：中间对齐；
宽度：95.8%；
利润底部：2%；
填充：15px；
-ms触摸动作：操作；
触摸动作：操作；
光标：指针；
背景图像：无；
字体大小：14px；
字号：500；
线高：1.4；
空白：nowrap；
webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
颜色：#333；
背景色：#e8e8e8；
}
.可折叠收割台：之后{
字体系列：“fontawesome”；
内容：“\f054”；
浮动：左；
字体大小：.70em；
垂直对齐：中间对齐；
右边距：10px；
显示：内联块；
线高：1.5em；
页边顶部：4.2px；
}
.可折叠标题：活动：之后{
字体系列：“fontawesome”；
内容：“\f078”；
浮动：左；
字体大小：.70em；
垂直对齐：中间对齐；
右边距：10px；
显示：内联块；
线高：1.556em；
}
.可折叠标题。焦点，
.可折叠标题：焦点{
颜色：#333；
背景：#d8d8d8！重要；
}
.活动，.可折叠标题：悬停{
颜色：#333；
背景#d8d8d8；
}
可折叠的{
列表样式类型：无；
填充内联开始：0；
}
.可折叠体{
文本对齐：左对齐；
垫面：2%；
垫底：2%；
边框底部：1px实心#e8e8e8；
左边框：1px实心#e8e8e8；
右边框：1px实心#e8e8e8；
利润底部：2%；
}
.可折叠体p{
左缘：1.5%；
保证金权利：1.5%；
}
提供相关工具和资源
我们的主要优势是通过其各种资源提供一条渠道，汇集关于谷物和相关材料的科学信息和技术研究。谷物协会的成员通过会议和出版物了解最新的关键问题，并有机会获得专业发展和与同行建立联系。主要产品包括：
-
谷物化学
谷物化学杂志，一本同行评议的杂志，对利用谷物、油籽和豆类的原材料、工艺和产品以及谷物领域的分析程序和方法进行了原始研究。没有其他杂志在有法律依据的原创研究的数量和质量上超过它
-
谷物食品世界（CFW）
谷物食品世界（CFW）包括多媒体环境中的专题文章和原创研究，重点关注谷物食品科学的进展，以及这些进展在烘焙、休闲食品、早餐食品和其他谷物食品当前实践中的应用
-
谷物协会书籍
谷物与谷物协会提供超过65个关于各种食品科学主题的标题，以及备受尊敬的AACC批准的分析方法，第11版。一些标题是技术性的，而另一些则是为多面手设计的
-
年会
年会吸引了1000多名以粮食为基础的专业人士参加，讨论关键的粮食科学问题。年会是全球谷物食品行业专业人士的基础教育和网络活动。年会还包括一个由250多件展品组成的贸易展。
-
继续教育
继续教育计划为各种食品相关行业的任何级别的食品行业专业人员提供优质的专业发展服务。课程旨在提高技能，拓宽对谷物应用的理解
-
网站
我们的网站（）为会员提供了在一个公共位置获取信息和资源的机会。该网站提供了40多年的可搜索谷物化学文摘、在线图书目录、特别报告、活动日历、在线研讨会和可搜索目录，可随时按地理区域或专业领域查找成员。
-
技术和行政委员会
我们的成员通过技术和行政委员会就各种倡议进行合作。委员会参与者帮助确定新出现的问题，为关键行业成分创建定义，并调查和验证分析方法
.collapsible-header:active:after {...}
.collapsible-header.open {...}
$(".collapsible-header").click(function(){
$(this).next(".collapsible-body").slideToggle("normal");
$(this).toggleClass("open");
});
.collapsible-header.open {...}
$(".collapsible-header").click(function(){
$(this).next(".collapsible-body").slideToggle("normal");
$(this).toggleClass("open");
});
我需要将“：after”添加到.collapsible-header.open，然后它工作得非常好！非常感谢。是的，我错了