我需要在单击其父元素时使 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/

10-12 13:04
查看更多