我已经完成了 90%。我有一个 Accordion 模块，我正试图完成它，但有一件让我望而却步。
功能(工作)
- Accordion 关闭(默认)
- 用户点击底部栏(“+”符号)
- 模块打开
- 模块打开
- 顶部区域变为蓝色背景
- 顶部区域的图标变为黄色
- “+”变为“-”
- 用户点击另一个 Accordion 模块
- 关闭之前打开的模块
功能(缺失/未按预期工作)。当用户单击下一个模块将其打开时，之前打开的模块将关闭(工作)，但是不会删除类以使其返回到默认状态。
我意识到我的 jQ 可能不是最优化的；所以我也很感激这方面的任何建议。
// jQuery Plugins
$(function(){
"use strict";
// Accordion Section
$('.mod-accordion-bottom').click(function(){
$(this).removeClass('active');
$(this).parent().find('.mod-accordion-top').removeClass('open');
$(this).parent().find('i.fa').removeClass('active');
$(this).find('i').addClass('fa-plus').removeClass('fa-minus');
$('.mod-accordion-content').slideUp();
if( $(this).prev().is(':hidden') === true ) {
$(this).prev().slideDown('normal');
$(this).parent().find('.mod-accordion-top').addClass('open');
$(this).addClass('active');
$(this).parent().find('i.fa').addClass('active');
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
}
});
});.mod-accordion-wrap {
margin-bottom: 0.625rem; }
.mod-accordion-top {
overflow: hidden;
border-radius: 8px 8px 0 0;
background: #282c2f; }
.mod-accordion-top.open {
background-color: #3d61a4; }
.mod-accordion-top-title, .mod-accordion-top-image {
width: 50%;
float: left;
max-height: 10.3125rem; }
.mod-accordion-top-title {
text-transform: uppercase; }
.mod-accordion-top-title-copy, .mod-accordion-top-title-icon {
width: 100%;
float: left; }
@media screen and (min-width: 40em) {
.mod-accordion-top-title-copy, .mod-accordion-top-title-icon {
width: 48%; } }
.mod-accordion-top-title-copy {
margin: 20px 0 0 20px;
padding: 0 155px 0 0; }
@media screen and (min-width: 40em) {
.mod-accordion-top-title-copy {
border-right: 2px solid #fefefe; } }
.mod-accordion-top-title-icon {
text-align: center; }
.mod-accordion-top-title-icon i.fa {
margin-top: 50px; }
.mod-accordion-top-title-icon i.fa.active {
color: #ffee00; }
.mod-accordion-content {
display: none;
overflow: hidden;
margin: 0.625rem 0; }
.mod-accordion-content-wrap {
overflow: hidden;
margin-bottom: 0.625rem; }
.mod-accordion-content-wrap:last-of-type {
margin-bottom: 0; }
.mod-accordion-content-title, .mod-accordion-content-copy {
width: 100%; }
@media screen and (min-width: 40em) {
.mod-accordion-content-title, .mod-accordion-content-copy {
width: 50%;
float: left; } }
.mod-accordion-content-copy {
padding: 25px 35px 25px 25px;
background-color: #3d61a4;
text-align: center;
min-height: 21.875rem; }
.mod-accordion-content-copy h4, .mod-accordion-content-copy p {
text-align: left; }
.mod-accordion-content-copy a {
color: #3d61a4;
background-color: #fefefe;
padding: 3px 0 0;
text-align: center;
border-radius: 50%;
margin: 40px auto 0;
display: block;
width: 32px;
height: 32px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.mod-accordion-content-copy a:hover {
background-color: #faa74a;
color: #fefefe; }
.mod-accordion-content-title {
position: relative;
text-transform: uppercase; }
.mod-accordion-content-title h2 {
padding: 20px; }
@media screen and (min-width: 40em) {
.mod-accordion-content-title h2 {
margin: 20px;
padding: 0; } }
.mod-accordion-content-title img {
position: absolute;
left: 0;
top: 0;
z-index: -1; }
.mod-accordion-bottom {
background-color: #b4b6b7;
border-radius: 0 0 8px 8px;
padding: 10px 0;
text-align: center; }
.mod-accordion-bottom.active, .mod-accordion-bottom:hover {
cursor: pointer;
background-color: #3d61a4; }
.mod-accordion-bottom i.fa {
color: #3d61a4;
background-color: #fefefe;
padding: 8px 0 0;
text-align: center;
border-radius: 50%;
margin: 0 auto;
display: block;
width: 32px;
height: 32px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer; }
.mod-accordion-bottom i.fa.fa-minus {
color: #faa74a; }
#body-content {
padding: 2.5rem 0;
color: #fefefe; }
#body-content p.lead {
text-transform: uppercase;
font-size: 1.9375rem;
color: #919dc9; }
/*# sourceMappingURL=app.css.map */<script src="https://use.fontawesome.com/d7ed46e5fb.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod-accordion-wrap">
<div class="mod-accordion-top">
<div class="mod-accordion-top-title">
<div class="mod-accordion-top-title-copy">
<h4>Lorem Ipsums' Story</h4>
</div>
<div class="mod-accordion-top-title-icon show-for-medium">
<i class="fa fa-book fa-3x"></i>
</div>
</div>
<div class="mod-accordion-top-image">
<img src="//placehold.it/800x600" alt="">
</div>
</div><!-- END Top -->
<div class="mod-accordion-content">
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Precision</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Engineering</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Engineering Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Engineering Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Development</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Development Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Development Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Future Vision</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Future Vision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Future Vision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div> <!-- END Content -->
<div class="mod-accordion-bottom">
<i class="fa fa-plus"></i>
</div> <!-- END Bottom -->
</div> <!-- END Wrap -->
<div class="mod-accordion-wrap">
<div class="mod-accordion-top">
<div class="mod-accordion-top-title">
<div class="mod-accordion-top-title-copy">
<h4>Our PoCT Story</h4>
</div>
<div class="mod-accordion-top-title-icon show-for-medium">
<i class="fa fa-book fa-3x"></i>
</div>
</div>
<div class="mod-accordion-top-image">
<img src="//placehold.it/800x600" alt="">
</div>
</div><!-- END Top -->
<div class="mod-accordion-content">
<div class="mod-accordion-content-title">
<h2>Precision</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div> <!-- END Content -->
<div class="mod-accordion-bottom">
<i class="fa fa-plus"></i>
</div> <!-- END Bottom -->
</div> <!-- END Wrap -->最佳答案
您可以通过将事件类添加到 wrap 元素而不是将其添加到每个元素来简化此过程。这将有助于我们简化脚本
// jQuery Plugins
$(function() {
"use strict";
// Accordion Section
$('.mod-accordion-bottom').click(function() {
var $wrap = $(this).closest('.mod-accordion-wrap').toggleClass('active'),
active = $wrap.hasClass('active');
$wrap.find('.mod-accordion-bottom i').toggleClass('fa-minus', active).toggleClass('fa-plus', !active);
$wrap.find('.mod-accordion-content')[active ? 'slideDown' : 'slideUp']('normal');
if (active) {
var $other = $('.mod-accordion-wrap.active').not($wrap).removeClass('active');
$other.find('.mod-accordion-content').slideUp();
$other.find('.mod-accordion-bottom i').removeClass('fa-minus').addClass('fa-plus');
}
});
});.mod-accordion-wrap {
margin-bottom: 0.625rem;
}
.mod-accordion-top {
overflow: hidden;
border-radius: 8px 8px 0 0;
background: #282c2f;
}
.mod-accordion-top.open {
background-color: #3d61a4;
}
.mod-accordion-top-title,
.mod-accordion-top-image {
width: 50%;
float: left;
max-height: 10.3125rem;
}
.mod-accordion-top-title {
text-transform: uppercase;
}
.mod-accordion-top-title-copy,
.mod-accordion-top-title-icon {
width: 100%;
float: left;
}
@media screen and (min-width: 40em) {
.mod-accordion-top-title-copy,
.mod-accordion-top-title-icon {
width: 48%;
}
}
.mod-accordion-top-title-copy {
margin: 20px 0 0 20px;
padding: 0 155px 0 0;
}
@media screen and (min-width: 40em) {
.mod-accordion-top-title-copy {
border-right: 2px solid #fefefe;
}
}
.mod-accordion-top-title-icon {
text-align: center;
}
.mod-accordion-top-title-icon i.fa {
margin-top: 50px;
}
.mod-accordion-wrap.active .mod-accordion-top-title-icon i.fa {
color: #ffee00;
}
.mod-accordion-content {
display: none;
overflow: hidden;
margin: 0.625rem 0;
}
.mod-accordion-content-wrap {
overflow: hidden;
margin-bottom: 0.625rem;
}
.mod-accordion-content-wrap:last-of-type {
margin-bottom: 0;
}
.mod-accordion-content-title,
.mod-accordion-content-copy {
width: 100%;
}
@media screen and (min-width: 40em) {
.mod-accordion-content-title,
.mod-accordion-content-copy {
width: 50%;
float: left;
}
}
.mod-accordion-content-copy {
padding: 25px 35px 25px 25px;
background-color: #3d61a4;
text-align: center;
min-height: 21.875rem;
}
.mod-accordion-content-copy h4,
.mod-accordion-content-copy p {
text-align: left;
}
.mod-accordion-content-copy a {
color: #3d61a4;
background-color: #fefefe;
padding: 3px 0 0;
text-align: center;
border-radius: 50%;
margin: 40px auto 0;
display: block;
width: 32px;
height: 32px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.mod-accordion-content-copy a:hover {
background-color: #faa74a;
color: #fefefe;
}
.mod-accordion-content-title {
position: relative;
text-transform: uppercase;
}
.mod-accordion-content-title h2 {
padding: 20px;
}
@media screen and (min-width: 40em) {
.mod-accordion-content-title h2 {
margin: 20px;
padding: 0;
}
}
.mod-accordion-content-title img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.mod-accordion-bottom {
background-color: #b4b6b7;
border-radius: 0 0 8px 8px;
padding: 10px 0;
text-align: center;
}
.mod-accordion-wrap.active .mod-accordion-bottom,
.mod-accordion-bottom:hover {
cursor: pointer;
background-color: #3d61a4;
}
.mod-accordion-bottom i.fa {
color: #3d61a4;
background-color: #fefefe;
padding: 8px 0 0;
text-align: center;
border-radius: 50%;
margin: 0 auto;
display: block;
width: 32px;
height: 32px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.mod-accordion-bottom i.fa.fa-minus {
color: #faa74a;
}
#body-content {
padding: 2.5rem 0;
color: #fefefe;
}
#body-content p.lead {
text-transform: uppercase;
font-size: 1.9375rem;
color: #919dc9;
}
/*# sourceMappingURL=app.css.map */<script src="https://use.fontawesome.com/d7ed46e5fb.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod-accordion-wrap">
<div class="mod-accordion-top">
<div class="mod-accordion-top-title">
<div class="mod-accordion-top-title-copy">
<h4>Lorem Ipsums' Story</h4>
</div>
<div class="mod-accordion-top-title-icon show-for-medium">
<i class="fa fa-book fa-3x"></i>
</div>
</div>
<div class="mod-accordion-top-image">
<img src="//placehold.it/800x600" alt="">
</div>
</div>
<!-- END Top -->
<div class="mod-accordion-content">
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Precision</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Engineering</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Engineering Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Engineering Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Development</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Development Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Development Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Future Vision</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Future Vision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Future Vision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- END Content -->
<div class="mod-accordion-bottom">
<i class="fa fa-plus"></i>
</div>
<!-- END Bottom -->
</div>
<!-- END Wrap -->
<div class="mod-accordion-wrap">
<div class="mod-accordion-top">
<div class="mod-accordion-top-title">
<div class="mod-accordion-top-title-copy">
<h4>Our PoCT Story</h4>
</div>
<div class="mod-accordion-top-title-icon show-for-medium">
<i class="fa fa-book fa-3x"></i>
</div>
</div>
<div class="mod-accordion-top-image">
<img src="//placehold.it/800x600" alt="">
</div>
</div>
<!-- END Top -->
<div class="mod-accordion-content">
<div class="mod-accordion-content-title">
<h2>Precision</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<!-- END Content -->
<div class="mod-accordion-bottom">
<i class="fa fa-plus"></i>
</div>
<!-- END Bottom -->
</div>
<!-- END Wrap -->关于javascript - jQuery 复杂 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41114258/