javascript - 显示/隐藏多个元素的过渡

Question

我正在尝试在我的一个网页上实现显示/隐藏功能。基本上，我的网站上有一个页面显示“行话”和定义。用户单击标题，然后应显示定义。

我尝试了两种不同的技术，一种有效但非常苛刻，没有过渡，它基本上是开放或封闭的:

    jQuery(function($){
        var acc = document.getElementsByClassName("jarg-container");
        var i;
  
        for (i = 0; i < acc.length; i++) {
          acc[i].onclick = function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
              panel.style.maxHeight = null;
            } 
            else {
              panel.style.maxHeight = panel.scrollHeight + "px";
            }    
          }
        }
      }); 

    .jarg-container {
        background: gainsboro;
        box-shadow: 4px 5px 14px 1px black;
        height: 4.5em;
        width: 45% !important;
        margin: 0 2.5% 2em;
    }
    .jarg-container h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .jarg-container .jargon-desc {
        height: 0;
        display: none;
    }
    .jarg-container.active .jargon-desc{
        height:100%;
        display:block;
    }
    .jarg-container.active {
        height: 100%;
    }
    .jarg-container h2::after {
        content: '\02795';
        font-size: 0.5em !important;
        right: 10%;
        position: absolute;
    }
    .jarg-container.active h2::after {
        content: "\2796";
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="primary" class="content-area">
                        <main id="main" class="site-main" role="main">
                            <div class="col-md-12">
                                <div class="col-md-6 jarg-container">
                                    <h2>Jargon</h2>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>    
                                <div class="col-md-6 jarg-container">
                                    <h2>Jargon</h2>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>
                            </div> 
                            <div class="col-md-12">
                                <div class="col-md-6 jarg-container">
                                <h2>Jargon</h2>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>    
                                <div class="col-md-6 jarg-container">
                                    <h2>Jargon</h2>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>
                            </div>
                        </main>
                        <!-- #main --> 
                    </div>
                    <!-- #primary --> 
                </div>
            </div>
        </div>
    </main>

另一个我喜欢，但是当一个打开时，它们都打开了:

    $('.jargon-header').on('click', function(){
        $('.jargon-desc').toggleClass('show');
    });

    .jargon-desc {
        height: 0px;
        opacity: 0;
        transition: all .75s ease;
    }
    .jargon-desc.show {
        opacity: 1;
        height: 100%;
    }
    .jarg-container {
        background: gainsboro;
        box-shadow: 4px 5px 14px 1px black;
        width: 45% !important;
        margin: 0 2.5% 2em;
        transition:all .75s ease;
    }
    .jarg-container h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .jarg-container h2::after {
        content: '\02795';
        font-size: 0.5em !important;
        right: 10%;
        position: absolute;
    }
    .jarg-container.show h2::after {
        content: "\2796";
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="primary" class="content-area">
                        <main id="main" class="site-main" role="main">
                            <div class="col-md-12">
                                <div class="col-md-6 jarg-container">
                                    <div class="jargon-header" href="#">
                                        <h2>Jargon</h2>
                                    </div>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>    
                                <div class="col-md-6 jarg-container">
                                    <div class="jargon-header" href="#">
                                        <h2>Jargon</h2>
                                    </div>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-6 jarg-container">
                                    <div class="jargon-header" href="#">
                                        <h2>Jargon</h2>
                                    </div>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>    
                                <div class="col-md-6 jarg-container">
                                    <div class="jargon-header" href="#">
                                        <h2>Jargon</h2>
                                    </div>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-6 jarg-container">
                                    <div class="jargon-header" href="#">
                                        <h2>Jargon</h2>
                                    </div>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>    
                                <div class="col-md-6 jarg-container">
                                    <div class="jargon-header" href="#">
                                        <h2>Jargon</h2>
                                    </div>
                                    <div class="jargon-desc">
                                        <p>Description.</p>
                                    </div>
                                </div>
                            </div>
                        </main>
                        <!-- #main --> 
                    </div>
                    <!-- #primary --> 
                </div>
            </div>
        </div>
    </main>

理想情况下，我想要 2... 的组合，其中所有元素单独打开并使用第二个代码使用的过渡效果...

结合两者的任何帮助都会很棒

Answer 1

要同时实现过渡和一次只移动一个元素，您可以使用this 关键字。当一个函数被调用时，在本例中是点击监听器中的 function()，它会将 this 绑定(bind)到该上下文。这允许您通过简单地使用 $(this) 来选择被点击的元素。

这可能不是最详细的解释，所以here是关于该主题的更多信息。

$('.jargon-header').on('click', function() {
  // Use this to select the element that was clicked
  $(this)
  // Then just select the next description
  .next('.jargon-desc')
  // And toggle the class on that description
  .toggleClass('show');
});

.jargon-desc {
  height: 0px;
  opacity: 0;
  transition: all .75s ease;
}

.jargon-desc.show {
  opacity: 1;
  height: 100%;
}

.jarg-container {
  background: gainsboro;
  box-shadow: 4px 5px 14px 1px black;
  width: 45% !important;
  margin: 0 2.5% 2em;
  transition: all .75s ease;
}

.jarg-container h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.jarg-container h2::after {
  content: '\02795';
  font-size: 0.5em !important;
  right: 10%;
  position: absolute;
}

.jarg-container.show h2::after {
  content: "\2796";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div id="primary" class="content-area">
          <main id="main" class="site-main" role="main">
            <div class="col-md-12">
              <div class="col-md-6 jarg-container">
                <div class="jargon-header" href="#">
                  <h2>Jargon</h2>
                </div>
                <div class="jargon-desc">
                  <p>Description.</p>
                </div>
              </div>
              <div class="col-md-6 jarg-container">
                <div class="jargon-header" href="#">
                  <h2>Jargon</h2>
                </div>
                <div class="jargon-desc">
                  <p>Description.</p>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="col-md-6 jarg-container">
                <div class="jargon-header" href="#">
                  <h2>Jargon</h2>
                </div>
                <div class="jargon-desc">
                  <p>Description.</p>
                </div>
              </div>
              <div class="col-md-6 jarg-container">
                <div class="jargon-header" href="#">
                  <h2>Jargon</h2>
                </div>
                <div class="jargon-desc">
                  <p>Description.</p>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="col-md-6 jarg-container">
                <div class="jargon-header" href="#">
                  <h2>Jargon</h2>
                </div>
                <div class="jargon-desc">
                  <p>Description.</p>
                </div>
              </div>
              <div class="col-md-6 jarg-container">
                <div class="jargon-header" href="#">
                  <h2>Jargon</h2>
                </div>
                <div class="jargon-desc">
                  <p>Description.</p>
                </div>
              </div>
            </div>
          </main>
          <!-- #main -->
        </div>
        <!-- #primary -->
      </div>
    </div>
  </div>
</main>