制作一個可擴展的頁腳

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