首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >显示更多/显示更少按钮-修复新内容放置的工作方式

显示更多/显示更少按钮-修复新内容放置的工作方式
EN

Stack Overflow用户
提问于 2020-09-24 08:36:04
回答 2查看 72关注 0票数 0

我正在实现一个“查看全部”按钮,在默认状态下隐藏一些内容,但在单击“查看全部”按钮时显示它。它工作得很好,因为隐藏内容实际上是一个很长的列表(注意:为了方便,我将实际内容替换为"Hidden content it,It's long list .“在下面的代码中),所以当前的设置使用户感到困惑--现在,当按钮被单击时,(长的)隐藏列表显示在按钮的上方,并且按钮停留在同一位置。

我想让事情变得更加用户友好,这样当按钮被点击时,我希望隐藏的内容仍然显示在按钮上方,但希望按钮移动到末尾(即人们将向下滚动以访问此查看较少按钮)。并且当点击查看较少按钮时,内容消失,并且用户被带到原始位置。

这个网站的https://greylock.com/portfolio/有“查看所有”按钮下的“特色”,这正是我希望这个按钮的行为。

代码语言:javascript
复制
<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>

更新:

代码语言:javascript
复制
  <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>
EN

回答 2

Stack Overflow用户

发布于 2020-09-24 08:44:46

在我看来,问题出在切换按钮的样式上。检查它没有强制留在原地的CSS规则。就像position: fixed一样。列表也是如此。如果它有一个CSS规则强制停留在按钮上(位置和/或z索引属性),按钮将不会移动。

作为测试,删除CSS文件并尝试您的切换脚本。

您想要实现的是HTML上正常的框流。我相信有一些CSS会产生你所描述的效果。

票数 0
EN

Stack Overflow用户

发布于 2020-09-24 08:51:18

只需使用slideToggle(),就可以让这件事变得更容易

代码语言:javascript
复制
$(document).ready(function(){
   $('#myDIV').slideUp(); // SLIDE DIV UP INITIAL THEN TOGGLE AFTERWARD
       $("#click").click(function () {
           $('#myDIV').slideToggle(1000);
       });
  })

或者,您可以使用动画功能。

代码语言:javascript
复制
$('#myDIV').animate({'height' : '300px'}, 1000); // or use %

那么你的css看起来会像这样

代码语言:javascript
复制
#myDIV{height:0px; overflow:hidden;}

更少的代码,更容易管理。您还可以根据您的示例使用toggle切换文本

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64038012

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档