如何转换/动画我的div？我只是想做一个简单的动画像一个下拉菜单，但不知道如何:（谢谢任何帮助！
下面是我正在使用的代码:
null
function test1(button) {
var x = $('#showhide');
$(button).find('i').remove();
if ($(button).text().trim() == 'Test') {
$(button).html($('<i/>',{class:'fas fa-angle-down'})).append(' Test (Hide)');
x.fadeIn();
}
else {
$(button).html($('<i/>',{class:'fas fa-angle-right'})).append(' Test');
x.fadeOut();
}
}.button {
background-color: #b5b5b5;
margin-bottom: 10px;
cursor:pointer;
border: none;
color: #242424;
padding: 0px;
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button1 {
background-color: #b5b5b5;
color: #242424;
}
.button1:hover {
background-color: #9c9c9c;
color: #242424;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/0254f919d5.js" crossorigin="anonymous"></script>
<button id="btntest1" onclick="test1(this); if(document.getElementById('test1') .style.display=='none') {document.getElementById('test1') .style.display=''}else{document.getElementById('test1') .style.display='none'}" title="Clique pour en voir +" class="button button1">
<i class="fas fa-angle-right"></i> Test
</button><br>
<div id="test1" style="display:none; background-color: #b5b5b5; padding: 15px; color: #242424">
<h3>Lorem :</h3>
<ul><li>Ipsum</li><li>dolor</li><li>sit<br></li></ul>
<h3>Nulla :</h3>
<ul><li>id</li><li>mi</li><li>sagittis<br></li></ul>
</div>null
这是有点混乱，我知道，但我刚刚开始学习HTML，CSS和Javascript，所以请不要无礼:（（还有，我的英语说得不是很好，对不起）
由于您已经使用了jQuery，因此可以使用slideToggle函数。
null
function test1(button) {
$("#test1").slideToggle("slow");
var x = $("#showhide");
$(button).find("i").remove();
if ($(button).text().trim() == "Test") {
$(button)
.html($("<i/>", {
class: "fas fa-angle-down"
}))
.append(" Test (Hide)");
x.fadeIn();
} else {
$(button)
.html($("<i/>", {
class: "fas fa-angle-right"
}))
.append(" Test");
x.fadeOut();
}
}.button {
background-color: #b5b5b5;
margin-bottom: 10px;
cursor: pointer;
border: none;
color: #242424;
padding: 0px;
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button1 {
background-color: #b5b5b5;
color: #242424;
}
.button1:hover {
background-color: #9c9c9c;
color: #242424;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/0254f919d5.js" crossorigin="anonymous"></script>
<button id="btntest1" onclick="test1(this);" title="Clique pour en voir +" class="button button1">
<i class="fas fa-angle-right"></i> Test</button
><br />
<div
id="test1"
style="
display: none;
background-color: #b5b5b5;
padding: 15px;
color: #242424;
"
>
<h3>Lorem :</h3>
<ul>
<li>Ipsum</li>
<li>dolor</li>
<li>sit<br /></li>
</ul>
<h3>Nulla :</h3>
<ul>
<li>id</li>
<li>mi</li>
<li>sagittis<br /></li>
</ul>
</div>
由于您使用的是jQuery，您可以使用sildeUp和slideDown，它们内置了动画。
null
function test1(button) {
var x = $('#test1');
$(button).find('i').remove();
if ($(button).text().trim() == 'Test') {
$(button).html($('<i/>', { class: 'fas fa-angle-down' })).append(' Test (Hide)');
x.slideDown();
}
else {
$(button).html($('<i/>', { class: 'fas fa-angle-right' })).append(' Test');
x.slideUp();
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/0254f919d5.js" crossorigin="anonymous"></script>.button {
background-color: #b5b5b5;
margin-bottom: 10px;
cursor:pointer;
border: none;
color: #242424;
padding: 0px;
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button1 {
background-color: #b5b5b5;
color: #242424;
}
.button1:hover {
background-color: #9c9c9c;
color: #242424;
}<button id="btntest1"
onclick="test1(this);"
title="Clique pour en voir +" class="button button1">
<i class="fas fa-angle-right"></i> Test
</button><br>
<div id="test1" style="display:none; background-color: #b5b5b5; padding: 15px; color: #242424">
<h3>Lorem :</h3>
<ul>
<li>Ipsum</li>
<li>dolor</li>
<li>sit<br></li>
</ul>
<h3>Nulla :</h3>
<ul>
<li>id</li>
<li>mi</li>
<li>sagittis<br></li>
</ul>
</div>