我正在实现一个“查看全部”按钮,在默认状态下隐藏一些内容,但在单击“查看全部”按钮时显示它。它工作得很好,因为隐藏内容实际上是一个很长的列表(注意:为了方便,我将实际内容替换为"Hidden content it,It's long list .“在下面的代码中),所以当前的设置使用户感到困惑--现在,当按钮被单击时,(长的)隐藏列表显示在按钮的上方,并且按钮停留在同一位置。
我想让事情变得更加用户友好,这样当按钮被点击时,我希望隐藏的内容仍然显示在按钮上方,但希望按钮移动到末尾(即人们将向下滚动以访问此查看较少按钮)。并且当点击查看较少按钮时,内容消失,并且用户被带到原始位置。
这个网站的https://greylock.com/portfolio/有“查看所有”按钮下的“特色”,这正是我希望这个按钮的行为。

<div>content goes here</div>
<div id="myDIV" style="display:none">
Hidden content goes here, it's a long list.....
</div>
<button id="click" onclick="myFunction()">View All</button>
<style>
#myDIV {
display:none;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
$("#click").text("View Less");
} else {
x.style.display = "none";
$("#click").text("View All");
}
}
</script>更新:
<div>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="myDIV">
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<button id="click" onclick="myFunction()">View All</button>
<div>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised 2in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<script type="text/javascript">
$(document).ready(function(){
$('#myDIV').slideUp(); // SLIDE DIV UP INITIAL THEN TOGGLE AFTERWARD
$("#click").click(function () {
$('#myDIV').slideToggle(1000);
});
})
</script>发布于 2020-09-24 08:44:46
在我看来,问题出在切换按钮的样式上。检查它没有强制留在原地的CSS规则。就像position: fixed一样。列表也是如此。如果它有一个CSS规则强制停留在按钮上(位置和/或z索引属性),按钮将不会移动。
作为测试,删除CSS文件并尝试您的切换脚本。
您想要实现的是HTML上正常的框流。我相信有一些CSS会产生你所描述的效果。
发布于 2020-09-24 08:51:18
只需使用slideToggle(),就可以让这件事变得更容易
$(document).ready(function(){
$('#myDIV').slideUp(); // SLIDE DIV UP INITIAL THEN TOGGLE AFTERWARD
$("#click").click(function () {
$('#myDIV').slideToggle(1000);
});
})或者,您可以使用动画功能。
$('#myDIV').animate({'height' : '300px'}, 1000); // or use %那么你的css看起来会像这样
#myDIV{height:0px; overflow:hidden;}更少的代码,更容易管理。您还可以根据您的示例使用toggle切换文本
https://stackoverflow.com/questions/64038012
复制相似问题