jQuery切换div与箭头动画fontawesome CSS
[英]Jquery toggle div with arrow animation fontawesome css
问题描述
我有很多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： 在一个简单的手风琴小部件中上下切换箭头
http://jsfiddle.net/nandhakumarsri9/gu7h3/8/
但这是手风琴，所以一个div在另一个打开时关闭。 我想分别打开和关闭它们，并且希望箭头在打开和关闭时动画。
同样，箭头是用一些奇怪的边框CSS制成的，我知道您可以使用CSS和FontAwesome Icons做到。
有人做过吗？
3 个解决方案
解决方案1
3 已采纳 2018-07-12 13:39:35
编辑一些错误已修复，新版本在这里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>
解决方案2
0 2018-07-12 13:31:49
下面，我使用您的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>
解决方案3
0 2018-07-12 13:39:28
制作手风琴非常容易。 您可以查看来自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>
使用jQuery切换CSS动画？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.