Javascript 制作一个可扩展的页脚_Javascript_Css

Javascript 制作一个可扩展的页脚

javascript css

Javascript 制作一个可扩展的页脚,javascript,css,Javascript,Css,我想制作一个类似于JSBin JavaScript列的页脚的页脚，以防出错：（扩展前）（扩展后）确切地说，它满足： 1）无论主体（引发错误的主体）有多大，它始终位于页面底部 2）当用户点击它时，它可以展开，然后折叠回来我已经编写了以下代码（），它显示了页脚，并且不能折叠 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://appsforoff

我想制作一个类似于JSBin JavaScript列的页脚的页脚，以防出错：

（扩展前）（扩展后）确切地说，它满足：

1）无论主体（引发错误的主体）有多大，它始终位于页面底部

2）当用户点击它时，它可以展开，然后折叠回来

我已经编写了以下代码（），它显示了页脚，并且不能折叠

<!DOCTYPE html>
<html>
  <head>    
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
      #footer {
      background-color: #FA8072;
      width: 100%;
      position: fixed;
      bottom: 0px;
      }
    </style>
  </head>
  <body class="ms-font-m">
    the body
    <div id="footer">
      footer_line_1<br>footer_line_2<br>footer_line_3
    </div>
  </body>
</html>


#页脚{
背景色：#FA8072；
宽度：100%；
位置：固定；
底部：0px；
}
身体
页脚线1
页脚线2
页脚线3

有人知道如何使其可扩展和可折叠吗

PS：我还列出了我必须用于其他目的的css文件，它们可能很有用…

是的。您可以使用

toggle（）

函数展开和折叠

$（“#显示”）。单击（函数（）{
$（“#shoowDiv”）。切换（500）；
});
#页脚{
背景色：#FA8072；
宽度：100%；
位置：固定；
底部：0px；
}
#肖维夫{
显示：无；
}

身体
3个错误

页脚线1

页脚线2

页脚线3
如果您的错误数量即将增加，您可以添加滚动支持，这样页脚就不会覆盖整个页面-

$（“#显示”）。单击（函数（）{
$（“#shoowDiv”）。切换（500）；
});
#页脚{
背景色：#FA8072；
宽度：100%；
位置：固定；
底部：0px；
}
#肖维夫{
显示：无；
最大高度：100px；
溢出y：自动；
}
#展示{
}


身体
7个错误

问题1
问题2
第3期
问题4
第5期
第6期
第7期

当前代码的确切问题是什么？当前代码总是扩展所有内容。。。我想让它能够倒塌…我明白了。。。是否可以添加小三角形，并在折叠/展开时对其进行更改？此外，为什么折叠/展开动作非常慢？是的，我们可以添加三角形并使其切换，切换速度慢的原因是我提到的秒数。检查上面的JSFIDLE链接。已经用你的小三角形编辑过：）和我问的第一个问题相同：是否可以添加小三角形并在折叠/展开时进行更改？此外，为什么折叠/扩展操作非常慢？@SoftTimur i更正了指向JSFIDLE的链接。如Thinker所示，可以通过toggleClass方法切换图标