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.