文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >显示/隐藏多个元素的转换

问显示/隐藏多个元素的转换
EN

Stack Overflow用户
提问于 2018-12-31 20:31:04
回答 1查看 32关注 0票数 0

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

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

​

代码语言：javascript
复制
    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";
            }    
          }
        }
      });
代码语言：javascript
复制
    .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";
    }
代码语言：javascript
复制
<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>

​

另一个我喜欢，但当一个打开的时候，它们都打开了：

​

代码语言：javascript
复制
    $('.jargon-header').on('click', function(){
        $('.jargon-desc').toggleClass('show');
    });
代码语言：javascript
复制
    .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";
    }
代码语言：javascript
复制
<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.其中所有元素单独打开，并使用第二个代码使用的转换效果.

任何帮助组合2将是令人惊奇的

jquery
css
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-31 20:45:45

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

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

​

代码语言：javascript
复制
$('.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');
});
代码语言：javascript
复制
.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";
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53991202

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档