Jquery 切换 div 带有箭头动画 fontawesome css

Question

我得到了一个包含很多 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>

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

我尝试了这个 post 的 JSfiddle： Toggle up and down arrows in a simple accordion widget

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

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

箭头还带有一些奇怪的边框 CSS，我知道您可以使用 CSS 和 FontAwesome 图标来完成。

以前有人做过吗？

Answer 1

下面我使用您的 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>

Answer 2

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

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

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

其次，能够同时打开所有内容非常简单。请看下面我为您编写的代码。

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>

Answer 3

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

看看这个片段。希望对您有所帮助！

$(".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>

Jquery 切换 div 带有箭头动画 fontawesome css

Jquery toggle div with arrow animation fontawesome css

javascript

css

jquery

toggle

font-awesome