javascript - 展开 div 的其余部分以显示完整内容(带按钮的 onClick)

Question

我正在尝试创建一个 div，它的折叠形式包含一些内容，单击按钮即可展开，显示附加内容(div 的完整形式)，并在末尾再次提供一个按钮来关闭展开的框。

这就是我所拥有的

var coll = document.getElementsByClassName("collapsible");    for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;

    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

.collapsible {
  background-color: red;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}


.collapsible:after {
  content: '+';
  color: black;
  float: right;
  margin-left: 5px;
}



.active:after {
  content: "-";
}
.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0s ease-out;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 15px;
}

<button class="collapsible">Title 1</button>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>



<button class="collapsible">Title 2 <br>   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</button>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

示例中的第二个 div 是我试图解释我想要实现的目标，即使它在技术上是错误的，它对我来说几乎可以很好地工作(因为没有背景颜色，所以没有人会看到实际的 div结构)，但折叠按钮最终出现在中间，暴露了困惑。

Answer 1

这是一个使用 jQuery 的简单示例。

该示例使用两种不同类型的打开/关闭触发器，以便您可以看到几个选项。请注意如何使用 CSS 创建第二个按钮。

$('button, .smallx')表示按钮元素和带有 class="smallx" 的元素监视用户点击事件。

当单击其中任何一个时，我们会在 DOM 树中搜索回类为 .container 的第一个元素。 ，然后从那里搜索类为 content 的元素。我们将那个元素分配给一个名为“box”的变量。其余部分是不言自明的(只是添加/删除一个类)。

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

*{position:relative;}
.container{max-width:300px;margin-bottom:20px;overflow:hidden;}
.collapsed{max-height:50px;}

.smallx{position:absolute;top:3px;right:3px;padding:3px;border:1px solid dodgerblue;cursor:pointer;z-index:1;}
.smallx:hover{border:1px solid green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <button class="collapsible">Title 1</button>
  <div class="content collapsed">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="container">
  <div class="smallx"> X </div>
  <div class="content collapsed">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>