我正在尝试创建一个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结构),但是折叠按钮最终通过出现在它的中间暴露了混乱。
发布于 2019-03-27 08:59:08
下面是一个使用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>
https://stackoverflow.com/questions/55367987
复制相似问题