使用JQuery旋转雪佛形

Question

我需要使一个人字形旋转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

Answer 1

你们很亲密。只需添加这一点点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>

Answer 2

试试这个

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);
});

Answer 3

定义元素可以存在的状态（例如旋转180^O/0^O、展开/折叠、ON/OFF等），然后声明条件（例如if（fart）{smell.it}）或事件（例如click,hover等），以调用行为（例如旋转、展开、纳税等）。在下面的演示中，添加/删除类(.fa-rotate-180)设置每个的样式。

类.fa-rotate-180是一个字体很棒的类，当应用时，它将旋转它的任何图标180^o。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>