jQuery切换div与箭头动画fontawesome CSS
[英]Jquery toggle div with arrow animation fontawesome css
问题描述
I got a filter menu with a lot of DIVS. 
我有很多DIVS的筛选器菜单。 All with the same classes: 所有具有相同的类：
<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>
I tried many different ways but most of them are not what I am looking for. 我尝试了许多不同的方法，但大多数都不是我想要的。
I tried the JSfiddle of this post: Toggle up and down arrows in a simple accordion widget 我尝试了这篇文章的JSfiddle： 在一个简单的手风琴小部件中上下切换箭头
http://jsfiddle.net/nandhakumarsri9/gu7h3/8/ http://jsfiddle.net/nandhakumarsri9/gu7h3/8/
But this is an accordion, so one div closes when other one opens. 但这是手风琴，所以一个div在另一个打开时关闭。 I want to open and close them seperatly and I want the arrows to animate on open and close. 我想分别打开和关闭它们，并且希望箭头在打开和关闭时动画。
Also the arrows are done with some strange border CSS, I know you can do it with CSS and FontAwesome Icons. 同样，箭头是用一些奇怪的边框CSS制成的，我知道您可以使用CSS和FontAwesome Icons做到。
Anyone done this before? 有人做过吗？
3 个解决方案
解决方案1
3 已采纳 2018-07-12 13:39:35
EDIT Some bugs fixed, new version is here https://jsfiddle.net/mhL3yken/57/ 编辑一些错误已修复，新版本在这里https://jsfiddle.net/mhL3yken/57/
Take a look at this snippet. 看看这个片段。 Hope it helps! 希望能帮助到你！
$(".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>
解决方案2
0 2018-07-12 13:31:49
Below I've reproduced a sample using your html : 下面，我使用您的html复制了一个示例：
Snippet : 片段：
$('.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>
解决方案3
0 2018-07-12 13:39:28
It's pretty easy to make an accordion. 制作手风琴非常容易。 You could look at the source code from jqueryUI accordion to understand better. 您可以查看来自jqueryUI手风琴的源代码以更好地理解。
Also the arrows are done with some strange border CSS - no, that's not strange at all. Also the arrows are done with some strange border CSS -不，一点都不奇怪。 It's a common practice. 这是一种常见的做法。 Why load an entire library ( fontAwesome ) if you need it for just some arrows that you can reproduce with CSS ? 如果只需要一些可以用CSS复制的箭头，为什么还要加载整个库（fontAwesome）？
To animate them, just use only one arrow ( not two as in your example ) and rotate it together with transition ( if that is the animation you were looking for ). 要为它们设置动画，只需使用一个箭头（而不是您的示例中的两个箭头），并将其与转场一起旋转（如果您正在寻找的动画）。
For the second thing, to be able to have all opened at the same time it's very straight forward. 第二件事，能够同时打开所有文件非常简单。 Just look at the code i wrote for you bellow. 看看下面我为您编写的代码。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.