我有一个包含很多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在另一个打开时关闭。我想分别打开和关闭它们,并且希望箭头在打开和关闭时设置动画。
此外,箭头是用一些奇怪的边框CSS制成的,我知道您可以使用CSS和FontAwesome Icons来实现。
有人做过吗?
答案 0 :(得分: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>
答案 1 :(得分:0)
下面,我使用您的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>
答案 2 :(得分:0)
制作手风琴非常容易。您可以查看jqueryUI手风琴的源代码以更好地理解。
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>