jQuery複雑なアコーディオン

Question

私は90％あります。私は完成させようとしているアコーデオンのモジュールを持っていますが、私を逃してしまう作品があります。

機能（デフォルト）

ユーザーは、下のバーをクリックする（ "+" 記号）

モジュールは

モジュールを開き

• トップを開く
  • アコーディオンを閉じた状態（作業）領域が青色の背景に変わる
  • 上部領域のアイコンが黄色に変わる
  • "+" が " - " 別のアコーディオンモジュール上の
• ユーザーがクリックする
• は、以前に開いたモジュール

機能（意図したとおりに動作しない/行方不明）を閉じます。ユーザーが次のモジュールをクリックして開くと、以前開いていたボタンが閉じられ（作業中）、クラスは削除されずにデフォルト状態に戻ります。

私は自分の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 -->

Answer 1

あなたは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 -->