如何将第二个div并入第一个div以便可见并折叠,然后按箭头按钮
问题描述:
我正在尝试实现可能为您提供的一项简单任务。如何将第二个div并入第一个div以便可见并折叠,然后按箭头按钮
我正在一个WebForms项目中工作。我很喜欢它,我首先学习了MVC。我有一个更新面板(“Tareas”部分),里面有几个div。这个面板的功能是保存一些数据。接下来,我有另一个div(“Documentos”部分)。这个div的功能是保存附件。现在的问题是,现在我只是在另一个div下面有一个div,并且在视觉上它似乎是两个分开的东西。它看起来像这样:
什么客户真正想要的是部分有“documentos”是“Tareas”段中的可溃缩段。第二部分(第二格)应按箭头按钮打开和关闭。它应该是这样的:
我怎样才能做到这一点?
谢谢!
答
检查此实施。我没有显示主要内容。它只会在你点击箭头的时候出现,并且会用jQuery切换。希望这可以帮助。 JSFiddle
$(".arrowDown").click(function(){
$(".arrowDown").toggleClass("animate");
\t $(".content").slideToggle();
});
.box{
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.box .arrowDown{
margin-right: 10%;
font-size: 4em;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.arrowUp{
text-align: right;
font-size: 4em;
margin-right: 10%;
cursor:pointer;
}
.animate{
transform: rotate(180deg);
}
.content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="documentos">DOCUMENTOS</div>
<div id="documentos2">0 DOCUMENTOS</div>
<div class="arrowDown">↓ </div>
</div>
<div class="content">
<h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, aut non! Perspiciatis quisquam rerum placeat odit, aut sed culpa quibusdam ipsam quo! Explicabo facilis aperiam dolores praesentium culpa, blanditiis officiis.</h1>
</div>
+1
非常感谢。这正是我所期待的。通过一些小的调整,我能够完成这项工作。我只是改了一点html来利用箭头的图标,并添加了一个类来将它旋转回原来的位置。谢谢!!!! – SamyCode
有很多教程,以使可折叠的元素,尝试“可折叠格”一个谷歌查询。 – Alesana