我需要在单击其父元素时使 V 形旋转 180 度,以指示某个部分是展开还是折叠为现有(非引导) Accordion 。
当前所有部分默认显示为展开(绿色)。单击 .BlackTitleExp_top_style div 时,标题部分关闭,div 背景颜色变为浅绿色,表示该部分已折叠。
理想情况下,当标题变为灰色时,人字形也应旋转 180 度,以便向下指示该部分已关闭。
理想情况下,我想通过点击 BlackTitleExp_top_style 父元素来完成,但我并不认同这个想法。任何建议将不胜感激。
$(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>
最佳答案
定义元素可以存在的状态(例如旋转 180o/0o、展开/折叠、
开/关等)然后声明 condition(s)(例如 if (fart) { smell.it })
或 event(s)(例如单击、悬停等)可能会发生以调用行为(例如旋转、展开、纳税等)。在添加/删除类 ( .fa-rotate-180
) 下面的演示在每个 <i>
上设置样式。
.fa-rotate-180
类是一个 Font Awesome 类,在应用时会将其任何图标旋转 180o。 CSS 动画也通过 transform: rotate()
、 transition
和 @keyframes
添加
演示中评论的详细信息
// 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>
关于javascript - 使用 JQuery 旋转 V 形,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58999777/