Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
http://kachibito.net/snippets/access-fast-link-on-fixed-bottom-page
上記のサイトを参考にしてフッターを表示/非表示できるHTMLを作成しようとしています。
そのままコピーしたはずなのですが・・・ボタン「>>」が表示されず困っております。
対象のブラウザはSafari10.0.1にて検証しています。
何かご教授いただければ幸いです。
----------HTML----------
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <link href="css/sample.css" rel="stylesheet"> </head> <body> <div class="footer"> <div class="button">»</div> <div class="content"> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> <a href="#">Menu 4</a> <a href="#">Menu 5</a> </div> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function() {for(i=1;i<=80;i++) $('body').append('<p>text '+i+': sample text</p>');
/Here's the code/
$('.button').toggle(function(){
$(this).html('«');
$('.content').slideUp(300);
}, function(){
$(this).html('»');
$('.content').slideDown(300);
});
});
</script>
----------CSS----------
body{margin:0;padding:0;color:#CCC;}
.footer{
position:fixed;
z-index:100;
width:100%;
bottom:0px;
border-top:#222 solid 1px;
}
.footer .button{
position:fixed;
right:0px;
bottom:0px;
width:50px;
text-align:center;
padding:10px;
background:#333;
color:#eee;
font-weight:bold;
cursor:pointer;
}
.footer .button:hover{
background:#eee;
color:#666;
}
.footer .content{
text-align:center;
background:#666;
padding:10px;
}
.footer .content a{
color:#FFF;
margin:0 5px 0 5px;
}
回答3件
0
ベストアンサー
.toggle()はjQuery1.9 で削除されていますので、.toggle()を使わない方法を考えました。
条件判定でif/elseを使っても良いのですが、三項演算子 ? : を使うとスマートに書けます。
JavaScript
1$(document).ready(function() { 2 3 for (var i = 1; i <= 80; i++) { 4 $('body').append('<p>text ' + i + ': sample text</p>'); 5 } 6 7 var button = false; 8 9 /*Here's the code*/ 10 $('.button').on('click', function() { 11 $(this).html(button ? '«' : '»'); 12 // button がtrueなら $('.content').slideUp(300) を、 13 // falseなら $('.content').slideDown(300) を呼び出す 14 $('.content')[button ? 'slideUp' : 'slideDown'](300); 15 // button をtrue⇔falseで切り替える 16 button = ! button; 17 }); 18});
投稿2016/12/04 11:32
編集2016/12/04 12:19
総合スコア1105
0
掲載ソースをそのまま使った場合、<div crlass=bottun></div>が消えてしまうようです。
そこで参照サイトと掲載ソースを見比べた結果、下記の相違がありました。
【参照サイト】
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>【掲載ソース】
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>厳密な原因は不明ですが、掲載ソースを「jquery-1.8.1.min.js」としたところ、上手く動きました。
投稿2016/12/04 12:08
総合スコア11
0
toggleメソッドがjQuery1.9以降挙動が変わったのと関係がありそう。サンプルもjqueryのバージョンをjQuery1.8.1に変更すると正常に動作します。
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
jqueryのバージョンを落とすというのもどうかと思うので、他の方法を試してみてはどうでしょうか。
投稿2016/12/04 11:42
総合スコア486
あなたの回答
tips
プレビュー
