Jquery 切换 div 与箭头动画 fontawesome css答案

【问题标题】：Jquery toggle div with arrow animation fontawesome cssJquery 切换 div 与箭头动画 fontawesome css
【发布时间】：2018-07-12 13:02:07
【问题描述】：

我有一个包含很多 DIVS 的过滤器菜单。都具有相同的类：

<div class="filter-groep">
    <h3 class="filter-title">Filter Title
        <div class="tooltip-info">
            <div class="tooltip-info-container">
                Some tooltip information
            </div>
        </div>
    </h3>
    <div class="filter-content">
        Filter content
    </div>
</div>

我尝试了许多不同的方法，但大多数都不是我想要的。

我尝试了这篇文章的 JSfiddle： Toggle up and down arrows in a simple accordion widget

http://jsfiddle.net/nandhakumarsri9/gu7h3/8/

但这是一个手风琴，所以当另一个 div 打开时，一个 div 会关闭。我想单独打开和关闭它们，我希望箭头在打开和关闭时动画。

而且箭头是用一些奇怪的边框 CSS 完成的，我知道你可以用 CSS 和 FontAwesome 图标来完成。

以前有人做过吗？

【问题讨论】：

标签： javascript jquery css toggle font-awesome

【解决方案1】：

编辑修复了一些错误，新版本在这里https://jsfiddle.net/mhL3yken/57/

看看这个sn-p。希望对您有所帮助！

$(".filter-groep").on('click', function(){
	var $filterContent = $(this).children(".filter-content");
  var $arrow = $(this).find(".fa-caret-down");
  
	if(!$filterContent.hasClass("opened")){
  	$filterContent.addClass("opened").slideDown(200);
    $arrow.addClass("rotated");
  } else if($filterContent.hasClass("opened")){
  	$filterContent.removeClass("opened").slideUp(200);
    $arrow.removeClass("rotated");
  }
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
}

.filter-groep {
  width: 300px;
  cursor: pointer;
}
.filter-groep .filter-title {
  width: 100%;
  background-color: #3276e5;
  border-bottom: 2px solid #2861bf;
  color: #fff;
  padding: 20px;
  margin: 0;
}
.filter-groep .filter-title .tooltip-info {
  font-size: 12px;
}
.filter-groep .filter-content {
  display: none;
  width: 100%;
  background-color: #ededed;
  padding: 10px 20px;
  font-size: 14px;
}

.fas {
  transition: transform 200ms ease-in-out;
}

.rotated {
  transform: rotate(180deg);
  transition: transform 200ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>

<div class="filter-groep">
    <h3 class="filter-title">
    <i class="fas fa-caret-down"></i>
    Filter Title
        <div class="tooltip-info">
            <div class="tooltip-info-container">
                Some tooltip information
            </div>
        </div>
    </h3>
    <div class="filter-content">
        Filter content
    </div>
</div>
<div class="filter-groep">
    <h3 class="filter-title">
    <i class="fas fa-caret-down"></i>
    Filter Title
        <div class="tooltip-info">
            <div class="tooltip-info-container">
                Some tooltip information
            </div>
        </div>
    </h3>
    <div class="filter-content">
        Filter content
    </div>
</div>
<div class="filter-groep">
    <h3 class="filter-title">
    <i class="fas fa-caret-down"></i>
    Filter Title
        <div class="tooltip-info">
            <div class="tooltip-info-container">
                Some tooltip information
            </div>
        </div>
    </h3>
    <div class="filter-content">
        Filter content
    </div>
</div>

【讨论】：

非常感谢，你让我开心！真的！
有的可以默认打开有的不可以吗？现在默认关闭了
等一下，我会在这里发布一个 jsfiddle。
试试这个jsfiddle.net/mhL3yken/46。如果有任何问题，请告诉我。
让我们continue this discussion in chat.

【解决方案2】：

制作手风琴很容易。您可以查看 jqueryUI 手风琴的源代码以更好地理解。

Also the arrows are done with some strange border CSS - 不，这并不奇怪。这是一种常见的做法。如果您只需要一些可以用 CSS 重现的箭头，为什么还要加载整个库 ( fontAwesome )？

要为它们设置动画，只需使用一个箭头（而不是您的示例中的两个）并将其与过渡一起旋转（如果那是您正在寻找的动画）。

第二件事，能够同时打开所有东西，这非常简单。请看下面我为您编写的代码。

let title = $('.filter-title')
title.on('click', function() {
  let content = $('.filter-content')
  let state = $(this).attr('class')
  state === 'open' ? $(this).attr('class', 'close') : $(this).attr('class', 'open')
  $('.open').next(content).slideDown()
  $('.close').next(content).slideUp()
})

h3 {
  padding: 15px;
  background: red;
  cursor: pointer;
  position: relative;
  margin: 0;
}

h3:after {
  position: absolute;
  right: 15px;
  top: 50%;
  border: 10px solid transparent;
  border-top-color: #F3F3F3;
  transition: 0.3s ease-out;
  content: "";
}

h3.open:after {
  transform: rotate(180deg) translateY(50%)
}

.filter-content {
  display: none;
  background: blue;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-groep">
  <h3 class="filter-title">Filter Title
    <div class="tooltip-info">
      <div class="tooltip-info-container">
        Some tooltip information
      </div>
    </div>
  </h3>
  <div class="filter-content">
    Filter content
  </div>
</div>
<div class="filter-groep">
  <h3 class="filter-title">Filter Title
    <div class="tooltip-info">
      <div class="tooltip-info-container">
        Some tooltip information
      </div>
    </div>
  </h3>
  <div class="filter-content">
    Filter content
  </div>
</div>

【讨论】：

【解决方案3】：

下面我使用您的 html 复制了一个示例：

片段：

$('.filter-groep').each(function() {
  var $accordian = $(this);
  $accordian.find('.filter-title').on('click', function() {
    if (!$(this).next().is(':visible')) {
      $(this).removeClass('close').addClass('open');
      $(this).find("i").removeClass("fa-angle-down").addClass("fa-angle-up");
      $(this).next().slideDown();
    } else {
      $(this).removeClass('open').addClass('close');
      $(this).find("i").removeClass("fa-angle-up").addClass("fa-angle-down");
      $(this).next().slideUp();
    }
  });
});

/*Accordian*/
 .filter-groep {
    width: 100%;
    background-color: #EDEDED;
}
.filter-groep .filter-title {
    color: #fff;
    background-color: #3A84DE;
    border-bottom: 1px solid #fff;
    position: relative;
    padding: 13px;
    font-size: 0.87em;
    cursor: pointer;
    overflow: hidden;
}
.filter-title .icon {
  float:right;
  right:10px;
}

.fa {
  font-size: 30px !important;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-groep">
    <h3 class="filter-title open">Filter Title
        <div class="icon"><i class="fa fa-angle-up"></i></div>
        <div class="tooltip-info">
            <div class="tooltip-info-container">
                Some tooltip information
            </div>
        </div>
    </h3>
    <div class="filter-content">
        Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter content
    </div>
</div>
<div class="filter-groep">
    <h3 class="filter-title open">Filter2 Title
        <div class="icon"><i class="fa fa-angle-up"></i></div>
        <div class="tooltip-info">
            <div class="tooltip-info-container">
                Some tooltip information
            </div>
        </div>
    </h3>
    <div class="filter-content">
        Filter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter content
    </div>
</div>

【讨论】：