は拡張フッター

を作り、私はエラーの場合JSBinのJavaScriptの列のフッターに似てフッターを作成したいと思います：（拡大前）は拡張フッター

（拡大後）正確には、それは関係なく、それを拡張することができ

2）ユーザーがそれをクリックしたときに本体が（それがエラーを発生させる）でどのように大きなページの一番下に常にではありません

1）、および：それは満足し大腸菌遅れてしまいました...

フッターを表示して折りたたむことができない次のコード（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ファイルを一覧表示し、彼らは役に立つかもしれない...

出典

2016-07-06 SoftTimur

をあなたの現在のコードで？ – idmean

現在のコードでは常にすべてが展開されます...折りたたむことができるようにしたい... – SoftTimur

エラーのあなたの数が大きい取得しようとしている場合は、そのフッターは文句を言わないあなたのページのすべて網羅ので、あなたは、スクロールサポートを追加することができます - 正確な問題は何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>

出典

2016-07-06 12:33:19 n3u3w3lt

あなたのJSFiddleリンクが正しいものではないようです... – SoftTimur

私が最初の答えを求めたのと同じ質問：小さな三角形を追加して折りたたんだときに変更することは可能ですか？拡張？さらに、崩壊/拡大の動きがなぜ非常に遅いのか？ – SoftTimur

@SoftTimur JSFiddleへのリンクを修正しました。 Thinkerが示したように、アイコンはtoggleClassメソッドで切り替えることができます – n3u3w3lt

はい。 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

出典

2016-07-06 12:17:47 Thinker

私は...小さい三角形を追加して折りたたんだ/展開すると変更できるのですか？さらに、崩壊/拡大の動きがなぜ非常に遅いのか？ – SoftTimur

はい、私たちは三角形を追加してトグルさせることができます。トグルが遅い理由は、その秒を言います。上記のjsfiddleリンクを確認してください。あなたの小さな三角形で編集しました:) – Thinker

は拡張フッター

答えて

関連する問題