如何将第二个div并入第一个div以便可见并折叠，然后按箭头按钮

我正在尝试实现可能为您提供的一项简单任务。如何将第二个div并入第一个div以便可见并折叠，然后按箭头按钮

我正在一个WebForms项目中工作。我很喜欢它，我首先学习了MVC。我有一个更新面板（“Tareas”部分），里面有几个div。这个面板的功能是保存一些数据。接下来，我有另一个div（“Documentos”部分）。这个div的功能是保存附件。现在的问题是，现在我只是在另一个div下面有一个div，并且在视觉上它似乎是两个分开的东西。它看起来像这样：

什么客户真正想要的是部分有“documentos”是“Tareas”段中的可溃缩段。第二部分（第二格）应按箭头按钮打开和关闭。它应该是这样的：

我怎样才能做到这一点？

谢谢！

来源

2017-06-21 SamyCode

有很多教程，以使可折叠的元素，尝试“可折叠格”一个谷歌查询。 – Alesana

检查此实施。我没有显示主要内容。它只会在你点击箭头的时候出现，并且会用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">&darr; </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>

来源

2017-06-21 20:13:56

非常感谢。这正是我所期待的。通过一些小的调整，我能够完成这项工作。我只是改了一点html来利用箭头的图标，并添加了一个类来将它旋转回原来的位置。谢谢！！！！ – SamyCode

如何将第二个div并入第一个div以便可见并折叠，然后按箭头按钮

回答

相关问题