javascript - 展开 div 的其余部分以显示完整内容(带有按钮的 onClick)
问题描述
我正在尝试创建一个 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 结构),这对我来说几乎可以很好地工作)但是折叠按钮最终会通过出现在这一切的中间来暴露混乱。
解决方案
这是一个使用 jQuery 的简单示例。
该示例使用两种不同类型的打开/关闭触发器,因此您可以看到几个选项。请注意 CSS 是如何用于创建第二个按钮的。
$('button, .smallx')
表示按钮元素和带有的元素都被监视用户点击事件。class="smallx"
当其中任何一个被点击时,我们搜索 DOM 树到第一个带有 class 的元素.container
,然后从那里搜索带有 class 的元素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>
推荐阅读
- python - 在 py.test 中捕获异常并引发错误时抑制第一个异常
- javascript - 在 Vue.js 手表中动画 css 属性,性能问题
- javascript - JSON 解析器如何编码不在基本多语言平面中的 unicode 字符?
- java - java中的平方应用
- java - Spring批量将资源的值从步骤1传递到下一步
- html - 如何禁用滚动并让网站适应屏幕而不移动。
- google-apps-script - 电子表格副本中的 Google 脚本不执行
- javascript - Puppeteer 从 pdf 下载链接获得响应
- angular - 配置Angular项目在开发模式下发送http cookie
- installation - 如何在没有本地清单的情况下安装 ClickOnce 应用程序