javascript - 单击展开的部分时折叠并展开其他部分-6ren

javascript - 单击展开的部分时折叠并展开其他部分

转载作者：行者123 更新时间：2023-11-28 03:34:51

我已附上代码。当我们打开/展开其他部分时，该部分将折叠。但当我们单击打开的按钮时，该部分不会折叠。我想在这两种情况下实现该部分的折叠: 单击打开的按钮以及单击其他部分时折叠

请帮忙解决这个问题。提前致谢

var coll = document.getElementsByClassName("collapsible");

for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    // before opening the accordion, you close everything
    for (var j = 0; j < coll.length; j++) {
      coll[j].classList.remove("active");
      coll[j].nextElementSibling.style.maxHeight = null;
    }
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

.centered {
  position: absolute;
  margin-top:30px;
  left: 13%;
  color:white;
  font-weight: bold;
  font-size:35px;
  height:auto;
  display:inline-block;
}

@media (max-width: 1030px) {
  .centered {
    float: none;
    display: block;
    text-align: left;
    }
  
 #container {
  display:flex;
  margin-left:50px;
  align-items: center;
}  
}

.column {
  padding: 30px;
  height: 200px; 
  margin: -20px;
  width: 430px;
  height: 120px;
  border-radius: 10px;
  display: inline-block;
  border: 2px #e6e6e6;
  padding-left: 48px;
 }
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 10px;
  height:55px;

}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-top: -30px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 40px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  margin:0px;
}

#container {
  display:flex;
  margin-left:10px;
  align-items: center;
  margin-top:-12px;
}
#container > * {
  margin-right: 15px;
}
.maincontainer{
  margin: auto;
  width: 90%;
  margin-top:-20px;
}
.card-heading{
  word-wrap: break-word;
  margin-left: 10px;
    margin-top: 11px;
}
h4{
 font-family: Verdana,sans-serif;
 font-size: 13px;
 line-height: 1.5;
}
h2{
 font-family: Verdana,sans-serif; 
 text-align:center;
 font-size:20px;
}
.sub-container{
  font-size: 20px; 
  font-family: 'Open Sans',sans-serif;

}

<div class="maincontainer">

<div class="collapsible">
  <span id="container">
      <img src="test.png" width="45" height="45" alt="">
      <span class="sub-container">Heading</span>
  </span>
</div>
<div class="content">
  <div class="sub-heading">
  <h2>Heading</h2>
</div>
 <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div>
<div class="sub-heading">
  <h2>Heading</h2>
</div>
</div>
   <div class="column">
    <div class="row">
    <div><img src="test" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

  

</div>

<div class="collapsible">
  <span id="container">
      <img src="test.png" width="45" height="45" alt="">
      <span class="sub-container">Heading</span>
  </span>
</div>
<div class="content">
 <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div>
<div class="sub-heading">
  <h2>Heading</h2>
</div>
</div>
   <div class="column">
    <div class="row">
    <div><img src="test" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

  
</div>
 


<div class="collapsible">
  <span id="container">
      <img src="test.png" width="45" height="45" alt="">
      <span class="sub-container">Heading</span>
  </span>
</div>

<div class="content">
  <div class="sub-heading">
  <h2>Heading</h2>
</div>

<div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div>
<div class="sub-heading">
  <h2>Heading</h2>
</div>
</div>
   <div class="column">
    <div class="row">
    <div><img src="test" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>
</div>
 </div>

最佳答案

var col1 = document.getElementsByClassName('collapsible');
let lastClick;
let content;

[...col1].forEach(col => {
  col.addEventListener('click', function() {
    // Check if last clicked ele is same as current and it has 'active' class
    if (this == lastClick && this.classList.contains('active')) {
      this.classList.remove('active');
      content.style.maxHeight = null;
      return;
    }
    // Remove active class from all elements along with maxheight to null
    [...col1].forEach(col => {
      col.classList.remove('active')
      col.nextElementSibling.style.maxHeight = null;
    });
    
    // Add active to clicked element and apply the height to the next element sibling.
    this.classList.add('active');
    content = this.nextElementSibling;
    content.style.maxHeight = content.scrollHeight + "px";
    lastClick = this;
  });
})

.centered {
  position: absolute;
  margin-top: 30px;
  left: 13%;
  color: white;
  font-weight: bold;
  font-size: 35px;
  height: auto;
  display: inline-block;
}

@media (max-width: 1030px) {
  .centered {
    float: none;
    display: block;
    text-align: left;
  }
  #container {
    display: flex;
    margin-left: 50px;
    align-items: center;
  }
}

.column {
  padding: 30px;
  height: 200px;
  margin: -20px;
  width: 430px;
  height: 120px;
  border-radius: 10px;
  display: inline-block;
  border: 2px #e6e6e6;
  padding-left: 48px;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 10px;
  height: 55px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-top: -30px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 40px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  margin: 0px;
}

#container {
  display: flex;
  margin-left: 10px;
  align-items: center;
  margin-top: -12px;
}

#container>* {
  margin-right: 15px;
}

.maincontainer {
  margin: auto;
  width: 90%;
  margin-top: -20px;
}

.card-heading {
  word-wrap: break-word;
  margin-left: 10px;
  margin-top: 11px;
}

h4 {
  font-family: Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

h2 {
  font-family: Verdana, sans-serif;
  text-align: center;
  font-size: 20px;
}

.sub-container {
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
}

<div class="maincontainer">

  <div class="collapsible">
    <span id="container">
                <img src="test.png" width="45" height="45" alt="">
                <span class="sub-container">Heading</span>
    </span>
  </div>
  <div class="content">
    <div class="sub-heading">
      <h2>Heading</h2>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div>
      <div class="sub-heading">
        <h2>Heading</h2>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>



  </div>

  <div class="collapsible">
    <span id="container">
                <img src="test.png" width="45" height="45" alt="">
                <span class="sub-container">Heading</span>
    </span>
  </div>
  <div class="content">
    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div>
      <div class="sub-heading">
        <h2>Heading</h2>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>


  </div>



  <div class="collapsible">
    <span id="container">
                <img src="test.png" width="45" height="45" alt="">
                <span class="sub-container">Heading</span>
    </span>
  </div>

  <div class="content">
    <div class="sub-heading">
      <h2>Heading</h2>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div>
      <div class="sub-heading">
        <h2>Heading</h2>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>
  </div>
</div>

关于javascript - 单击展开的部分时折叠并展开其他部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57834552/

文章推荐： html - 根据容器大小缩放vimeo视频并去除黑条

文章推荐： c++ - rfind 和 << 崩溃程序

文章推荐： php - 如何使用从数据库中提取的图像制作幻灯片？

文章推荐： css - Font Awesome 在手机上不显示

javascript - Aptana 折叠/折叠 javascript 代码
我需要能够在我的 javascript 中折叠/折叠各种代码片段，有点像 C# 中的#region #endregion。我找不到执行此操作的方法，有什么帮助吗？最佳答案窗口菜单 -> 选择首选项
javascript - 折叠 Accordion 时，边框会在此期间消失，折叠 Accordion 时边框如何可见？
折叠 Accordion 时，我注意到在这段时间内没有显示边框。例如，当 Accordion 展开时，我们会在展开时看到边界。这也可以在折叠 Accordion 时完成吗？ Accordion 折叠时
sublimetext2 - 折叠/折叠 sublime text 2 中的异常(exception)代码部分
是否有任何插件或快捷方式可以隐藏 Sublime Text 2 中除代码部分之外的所有内容？我需要一次折叠除部分之外的所有部分，而不是一次折叠一个部分。谢谢~ 最佳答案如果将鼠标悬停在行号上，您
scala - 折叠\/[A,A] 到 A
在 Web 应用程序中，我有一个操作可能会以各种不同的方式失败，或者最终会成功。在这种情况下，成功和失败由 SimpleResult 的子类表示(表示 HTTP 响应) 我使用 scalaz/上的
vba - 折叠/展开部分中的行
我的数据在这样的分组方案中分为三个连续的类别: 因此，整个“OCM”组被分解为名为“N/A”、“Financials”、“Industrials”等的子组，每个子组又被分解为进一步的子组。我在 Ex
scala - 折叠 NonEmptyList
我正在尝试猫图书馆，但我很难在我应该导入和创建的东西之间导航。我的问题如下: sealed trait Checks case class CheckViolation(id: Long, msg:
Vim 折叠 - 标记打开的折叠
有没有办法查看当前文件中打开的折叠位置？我个人在打开折叠和移动时遇到问题，我无法找到折叠开始的线!也许有一个选项可以在数字旁边设置一个漂亮的折叠提示。也许是这样的: + 1 void myfunc(
基于空白深度的 Notepad++ 折叠
我正在寻找一种按空白深度折叠纯文本的方法。我更喜欢 Notepad++ 解决方案，但如果它只能在另一个编辑器中完成，我可以处理。例如 Header is arbitrary text Child i
jsTree 节点展开/折叠
今天早上我遇到了优秀的 jstree jQuery UI 插件。一句话——太棒了!它易于使用，易于样式化，并且可以按照包装盒上的说明进行操作。我还没有弄清楚的一件事是 - 在我的应用程序中，我想确
wpf - 折叠/展开组框
我有以下XAML，其中堆叠了三个组框。这些组框的标题中是复选框。我想要实现的是:当我选中/取消选中一个框时，我希望相应的groupbox能够以平滑的动画缓慢展开/折叠。我正在Blend 4中尝试此
Vim 折叠 - 在光标下递归关闭所有子项
我知道如何使用 zO 打开光标下的所有折叠. 但是反向怎么做呢？我想要类似 za 的东西确实如此，但也具有递归性。附注。我知道有 zC ，但它会关闭与当前行相关的所有父级折叠，我想关闭子级。最佳
jquery - 如何防止导航栏在单击具有下拉类的特定菜单项时隐藏/折叠？
我试图防止点击 About Us 时导航栏崩溃部分或 Projects以下代码中的部分。我已经尝试过event.stopPropagation()在这两个按钮上，但是当 jQuery 代码执行时，导航
wpf - 我需要对RowDetailsTemplate进行扩展/折叠
我有一个DataGrid。它具有DataGrid.RowDetailsTemplate。当单击一个按钮时，它应该展开/折叠；我该怎么做？
wpf - 使用XAML完成Storyboard时将元素的可见性设置为“折叠”
我有一个 Storyboard动画，使用Opacity属性可以使控件淡出 View 。完成后，我想将控件的“可见性”设置为“折叠”。我也想做相反的事情...将“可见性”设置为“可见”，然后使用 St
SublimeText3 折叠/展开所有方法
我将 SublimeText3 用于 C++ 和 Java。我想知道是否有办法折叠文件/类中的所有方法，然后将它们全部展开，而不管插入符号在哪里。或者有没有办法列出所有的功能/方法。基本上我希望能够
没有空格的 YAML 折叠
如何在 YAML 中断开长字符串(如长 url 或文件名/路径)，而不会将换行符变成空格？示例输入: url: > https://example.com/?what=Lorem %20ip
scala - 折叠 HList？
给定: import shapeless._ case class F(x: Option[Int], y: Option[Int]) 我想帮忙写一个函数，f: def f(Option[Int]::
JavaScript:在reduce方法中引用剩余的数组(折叠)？
我想测试数组是否仅包含唯一元素，我的解决方案如下: function uniqueElements(a) { var r = true; while (a) { var [el, a]
javascript - HTML制作菜单展开/折叠
我试图在单击“项目”按钮时使“javascript 项目”和“CGI 项目”滑动切换。但是，我不太明白为什么点击时只有CGI项目按钮切换，而javascript项目按钮保持不变？我正在尝试使用 Jq
javascript - 单击标题时动态展开/折叠
我有一组需要在 UI 中显示的项目，例如标题和其下的项目列表。有一个父组件，我将在其中将此数据传递到如下所示的文件. 在此基础上显示了父子布局。现在我需要根据标题的点击展开/折叠。有一个可以附加

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单击展开的部分时折叠并展开其他部分