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
  });
});

jQuery show / hide使用多个嵌套div进行展开/折叠

1 个答案: