制作一个可扩展的页脚

Question

我想在出错的情况下制作一个类似于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文件，它们可能很有用......

Answer 1

是。 您可以使用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

Answer 2

如果您的错误数量即将变大，您可以添加滚动支持，以便该页脚不会覆盖您的所有页面 - JSFiddle

 $("#show").click(function() { $("#shoowDiv").toggle(500); });

  #footer { background-color: #FA8072; width: 100%; position: fixed; bottom: 0px; } #shoowDiv{ display:none; max-height: 100px; overflow-y: auto; } #show{ }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.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'>7 errors</p> <div id='shoowDiv'> <ul> <li>Issue #1</li> <li>Issue #2</li> <li>Issue #3</li> <li>Issue #4</li> <li>Issue #5</li> <li>Issue #6</li> <li>Issue #7</li> </ul> </div> </div> </body>

制作一个可扩展的页脚

问题描述

2 个解决方案

解决方案1
3 2016-07-06 12:17:47

解决方案2
0 已采纳 2016-07-06 12:33:19

制作一个可扩展的页脚

问题描述

2 个解决方案

解决方案1 3 2016-07-06 12:17:47

解决方案2 0 已采纳 2016-07-06 12:33:19

解决方案1
3 2016-07-06 12:17:47

解决方案2
0 已采纳 2016-07-06 12:33:19