如果出现错误，我想制作一个类似于 JSBin 的 JavaScript 列页脚的页脚:
(展开前)
(展开后)
准确地说，它满足:
1) 无论主体(引发错误)有多大，它始终位于页面底部
2) 当用户点击它时可以展开，然后折叠回去...
我写了下面的代码(JSBin)，显示页脚，不能折叠。
<!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>
有谁知道如何使它可扩展和可折叠？
PS:我还列出了我必须用于其他目的的 css 文件，它们可能会有用......
最佳答案
是的。您可以使用 toggle() 函数展开和折叠。
$("#show").click(function() {
$("#shoowDiv").toggle(500);
}); #footer {
background-color: #FA8072;
width: 100%;
position: fixed;
bottom: 0px;
}
#shoowDiv{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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">
<body class="ms-font-m">
the body
<div id="footer">
<p id='show'>3 errors</p>
<p id='shoowDiv'>
footer_line_1
<br>footer_line_2
<br>footer_line_3</p>
</div>
</body>切换功能慢的原因是我提到了这样的秒
$("#shoowDiv").toggle(500);
如果想快点，可以改秒
这是 jsFiddle
关于javascript - 做一个可扩展的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38223659/