我需要使一个人字形旋转180deg，当点击它的父元素，以指示一个节是展开还是折叠到一个现有的（非引导）手风琴。
目前，所有部分都默认显示展开（绿色）。单击.blacktitleexp_top_style div时，header部分关闭，而div的bg-color变为浅绿色，表示该部分已折叠。
理想情况下，当头部变为灰色时，人字形也应旋转180度，以使其指向下方，表示该区段已关闭。
理想情况下，我希望通过点击BlackTitleExp_top_style父元素来完成，但我不赞同这个想法。如有任何建议，将不胜感激。
null
$(document).ready(function() {
var BTE_top = $(".BlackTitleExp_top_style");
var BTE_top_BG = "BlackTitleExp_top_style_BG";
$(BTE_top).click(function() {
var el = $(this);
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
});.BlackTitleExp_top_style {
cursor: pointer;
background-color: rgba(92, 132, 92, 0.35);
border-radius: 5px;
position: relative;
padding: 15px;
margin-bottom: 10px;
}
.BlackTitleExp_top_style_BG {
transition: all 300ms ease;
cursor: pointer;
background-color: rgba(128, 128, 128, 0.35);
}
.chevron {
position: absolute;
right: 20px;
}
.rotate {
transform: rotate(180deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<!-- HTML -->
<div class="wrapper">
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
</div>null
定义元素可以存在的状态（例如旋转180O/0O、展开/折叠、ON/OFF等），然后声明条件（例如if（fart）{smell.it}）或事件（例如click,hover等），以调用行为（例如旋转、展开、纳税等）。在下面的演示中，添加/删除类(.fa-rotate-180)设置每个的样式。
类.fa-rotate-180是一个字体很棒的类，当应用时，它将旋转它的任何图标180o。CSS动画还通过转换：旋转()、转换和@keyframes添加
演示中注释的详细信息
null
// Start with all content hidden
$('.content').hide();
// When header.title is clicked...
$('.title').on('click', function(event) {
// Reference the p.content that follows the clicked header✱
const clickedContent = $(this).next('.content');
// Reference the i.chevron that is nested within clicked header
const clickedChevron = $(this).find('.chevron');
/* Slide up all p.content with the exception of the sibling p.content that follows
the clicked header✱ */
$('.content').not(clickedContent).slideUp('fast');
// Expand/Collapse the p.content of the clicked header✱
clickedContent.slideToggle('fast');
/* Remove .fa-rotate-180 class from all i.chevron with the exception of the
i.chevron nested within clicked header */
$('.chevron').not(clickedChevron).removeClass('fa-rotate-180');
/* Add/Remove .fa-rotate-180 class to/from the i.chevron nested within the
clicked header */
clickedChevron.toggleClass('fa-rotate-180');
});
/* ✱ The expand/collapse aspect of code is not required by OP question and
is only added to provide a complete functional example. */:root {
font: 16px/1.2 Arial;
}
.title {
font-size: 1.3rem;
cursor: pointer
}
.chevron {
/* block or inline-block for smoother animation */
display: inline-block;
/* Animation when going back to collapsed state */
transform: rotate(0deg);
transition: 0.3s;
}
.fa-rotate-180 {
/* This declares the keyframes used for animation */
animation: spin;
transition: 0.4s
}
/* An @rule used to breakdown animation into steps */
@keyframes spin {
100% {
transform: rotate(180deg);
}
}<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
试试这个
BTE_top.click(function() {
var el = $(this);
var icon = el.find('i');
if(!icon.hasClass('rotate')){
icon.addClass('rotate');
}
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
你们很亲密。只需添加这一点点CSS就可以得到您想要的：
.chevron {
position: absolute;
right: 20px;
transition: all 300ms ease;
}
.BlackTitleExp_top_style_BG .chevron {
transform: rotate(180deg);
}
现在，当添加blacktitleexp_top_style_bg时，chevron的transform属性将更新。现在在雪佛龙上定义了过渡之后，您的代码的其余部分就会按照预期工作。
null
$(document).ready(function() {
var BTE_top = $(".BlackTitleExp_top_style");
var BTE_top_BG = "BlackTitleExp_top_style_BG";
$(BTE_top).click(function() {
var el = $(this);
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
});.BlackTitleExp_top_style {
cursor: pointer;
background-color: rgba(92, 132, 92, 0.35);
border-radius: 5px;
position: relative;
padding: 15px;
margin-bottom: 10px;
}
.BlackTitleExp_top_style_BG {
transition: all 300ms ease;
cursor: pointer;
background-color: rgba(128, 128, 128, 0.35);
}
.chevron {
position: absolute;
right: 20px;
transition: all 300ms ease;
}
.BlackTitleExp_top_style_BG .chevron {
transform: rotate(180deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<!-- HTML -->
<div class="wrapper">
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
</div>