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

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/

但是，在那种情况下，我只有 TEXT！ 现在我在 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
  });
});