jQuery 显示/隐藏展开/折叠与多个嵌套的 div

Question

我想显示这个：

<div class="column mcb-column one-fourth column_column  column-margin-">
<div class="column_attr clearfix align_right">
<h1 class="passos-metodologia">1</h1>
</div></div>
<div class="column mcb-column three-fourth column_column  column-margin-">
<div class="column_attr clearfix align_left box">
<h2 class="box-heading">BOX TITLE</h2>
<p class="box-text">TEXT</p>
</div></div>

然后有一个切换按钮/链接来展开/折叠它：

<div class="more-first" style="width: 100%;">
<div class="column mcb-column one-fourth column_column  column-margin-">
<div class="column_attr clearfix align_right">
<h1 class="passos-metodologia">2</h1>
</div></div>
<div class="column mcb-column three-fourth column_column  column-margin-">
<div class="column_attr clearfix align_left">
<h2 class="box-heading">BOX TITLE</h2>
<p class="box-text">TEXT</p>
</div></div>
<div class="column mcb-column one-fourth column_column  column-margin-">
<div class="column_attr clearfix align_right">
<h1 class="passos-metodologia">3</h1>
</div></div>
<div class="column mcb-column three-fourth column_column  column-margin-">
<div class="column_attr clearfix align_left">
<h2 class="box-heading">BOX TITLE</h2>
<p class="box-text">TEXT</p>
</div></div>

还有 CSS，如果它有帮助：

.column {
   float: left;
   margin: 0 1% 40px;
}
.column-margin- .column {
   margin-bottom: 10px !important;
}
.column_attr.align_right {
   text-align: right;
}
.column_attr.align_left {
   text-align: left;
}
.one-fourth.column {
   width: 23%;
}
.three-fourth.column {
   width: 73%;
}
.passos-metodologia {
   color: white;
   margin-top: .4em;
   font-size: 10em;
}
.box {
   background: #353535;
   padding: 0 5%;
   max-width: 42em; 
   margin-left: 1.8em;
}
.box-heading {
   color: white; 
   text-align: right; 
   margin-top: 1em;
}
.box-text {
   color: white;
   text-align: justify;
}

我遇到过很多jQuery演示，但它们都保留了扩展内容上方的切换按钮。

正如您在 html 中看到的，这不是一个列表，但输出看起来像一个列表。因此，我不想在内容展开后通过在 1 和 2 之间设置一个切换按钮来"打破"列表。

我需要切换按钮/链接与内容一起向下移动，以便我有这个：

展开之前：

1- 内容
（切换链接）

展开后：

1- 内容
2- 内容
3- 内容
（切换链接）

附加信息：

一旦内容展开，我就遇到了关于切换位置的类似问题，这支笔起到了作用：https://codepen.io/maxds/pen/jgeoA/

但是，在这种情况下，我所拥有的只是文本！现在我在div 中有很多div。

因此，在上面的笔上找到的脚本不再适用，因为它根据在显示切换链接之前应该显示的字符量触发。

当我尝试展开/折叠多个嵌套div 时，如何准确翻译该笔的作用？

Answer 1

只需将要显示/隐藏的内容放在div 中，但将div 关闭在要向下"滑动"的最后一部分上方。

<div class="more-first" style="width: 100%;">
  <div class="column mcb-column one-fourth column_column  column-margin-">
  <div class="column_attr clearfix align_right">
  <h1 class="passos-metodologia">2</h1>
  </div></div>
  <div id="hideMe" style="display:none">
    <div class="column mcb-column three-fourth column_column  column-margin-">
    <div class="column_attr clearfix align_left">
    <h2 class="box-heading">BOX TITLE</h2>
    <p class="box-text">TEXT</p>
    </div></div>
    <div class="column mcb-column one-fourth column_column  column-margin-">
    <div class="column_attr clearfix align_right">
    <h1 class="passos-metodologia">3</h1>
    </div></div>
  </div> <!-- close the div of hidden content -->
  <!-- this content will slide down when the above is shown -->
  <div id="myclickDiv" class="column mcb-column three-fourth column_column  column-margin-">
  <div class="column_attr clearfix align_left">
  <h2 class="box-heading">BOX TITLE</h2>
  <p class="box-text">TEXT</p>
  </div></div>
</div> <!-- close outer div-->

然后使用 javascript/jQuery 来切换它：

在某些 JS 文件中，或在脚本标记中：

$( document ).ready(function() {
  $( "#myclickDiv ).click( function()
  {
      // use toggle(), or for explicit control: show() and hide()
      $( "#hideMe" ).toggle(400); //animate and show/hide it
  });
});