当使用 jQuery 和 CSS 显示隐藏的 div 时下推 div?

Question

我有 5 个按钮都包含一些不同的数据，我希望当您单击按钮时应该显示其隐藏数据，并按下它下面的div：

$(".Datanewpost").click(function() {
$(this).find(".data").toggle();
});

.data {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
<div class="Datanewpost">
Data 1
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd./div>
</div>
<div class="Datanewpost">
Data 2
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
</div>
<div class="Datanewpost">
Data 3
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd./div>
</div>
<div class="Datanewpost">
Data 4
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
</div>
<div class="Datanewpost">
Data 5
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
</div>
</div>

现在它只是切换元素而不将它们向下推，我需要改变什么才能得到我想要的东西？

Answer 1

关闭div 时缺少一些<

$(".Datanewpost").click(function() {
$(this).find(".data").toggle();
});

.data {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
<div class="Datanewpost">
Data 1
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
</div>
</div>
<div class="Datanewpost">
Data 2
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
</div>
</div>
<div class="Datanewpost">
Data 3
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
</div>
</div>
<div class="Datanewpost">
Data 4
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
</div>
</div>
<div class="Datanewpost">
Data 5
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
</div>
</div>
</div>

Answer 2

调整标记后，我们将使用slideToggle方法完成任务：

$(".Datanewpost").click(function() {
$(this).find(".data").slideToggle();
});

.data {
display: none;
}

<div class="data-main">
<div class="Datanewpost">
Data 1
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
</div>
</div>
<div class="Datanewpost">
Data 2
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
</div>
<div class="Datanewpost">
Data 3
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
</div>
</div>
<div class="Datanewpost">
Data 4
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
</div>
<div class="Datanewpost">
Data 5
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

详细了解slideToggle方法。

希望我能把你推得更远。

Answer 3

我做了一些更改，只是看看它

window.onload=function()
{
var btn=document.getElementsByClassName('Datanewpost');
for(var i=0;i<btn.length;i++)
{
btn[i].onclick=function()
{
var data=document.getElementsByClassName('data');
for(var i=0;i<data.length;i++)
data[i].style.maxHeight="0px";
this.nextElementSibling.style.maxHeight="1000px";
this.nextElementSibling.style.transition="0.4s ease";
}

}
}

.data {
max-height:0px;
overflow:hidden;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
<div class="Datanewpost">
Data 1
</div>
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>

<div class="Datanewpost">
Data 2
</div>  
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>

<div class="Datanewpost">
Data 3
</div>
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>

<div class="Datanewpost">
Data 4
</div>
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>

<div class="Datanewpost">
Data 5
</div>
<div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>

</div>