展开div的其余部分以显示全部内容（带有按钮的onClick）

Question

我正在尝试创建一个div，该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是我试图解释我要实现的目标，即使在技术上是错误的，它也几乎可以对我足够有效（因为不会出现bg颜色，因此没有人会看到实际的div结构），但是折叠按钮最终会通过出现在所有内容的中间而暴露出来。

Answer 1

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

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

$('button, .smallx')意味着将同时 $('button, .smallx') button元素和 class="smallx"元素是否存在用户单击事件。

当单击其中任何一个时，我们将DOM树搜索到类为.container的第一个元素，然后从那里搜索具有类content的元素。 我们该元素分配给一个叫做“盒子”的变量。 其余的内容不言自明（只需添加/删除类）。

 $('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>