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()函数进行展开和折叠。

＆＃13;

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

＆＃13;

 #footer {
   background-color: #FA8072;
   width: 100%;
   position: fixed;
   bottom: 0px;
 }
 
 #shoowDiv{
   display:none;
 }

＆＃13;

<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>

＆＃13;

切换功能缓慢的原因是我提到了这样的秒数

$("#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 个答案: