jQuery 复杂的手风琴

【问题标题】：jQuery Complicated AccordionjQuery 复杂的手风琴
【发布时间】：2016-12-13 05:27:42
【问题描述】：

我 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 -->

【问题讨论】：

    标签： javascript jquery css accordion


    【解决方案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 -->

    【讨论】：

    • 这是一个很好的解决方案 - 但是它交换了单个图标而不是保留它们的图标状态。每个模块都有独特的图标，有些图标保持不变
    • @SalB 检查更新，图标过滤器更新为.mod-accordion-bottom i
    • 谢谢！我正朝着那个方向前进！感谢您帮助我简化！ :D 我倾向于过度思考这些事情。
    • 按照我的方式切换它们的最佳方法是什么？如果您单击一个非活动模块，它将关闭另一个模块，但您也可以关闭您打开的同一个模块。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode