私はサイトhereを持っていますが、ヘッダーにボタンでサイドバーを表示して非表示にしたいのですが、動作しません。サイドバーのdivを非表示にして表示する
<div id="B">
<button>toggle</button>
</div>
$('button').toggle(function() {
$('#sidebarright').animate({ left: 0 })
}, function() {
$('#sidebarright').animate({ left: 200 })
})
を何も起こりません：ここに私がしようとしているものです。問題を見つけるのを助けてくれますか？
から
ダウンロードそれはあなたが使用しようとしているtoggle()機能が廃止とjQueryの最新バージョンから削除されました。それを複製するには、簡単な三項式でclick()イベントを使用することができます。試してみてください：
$('button').click(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
また、あなたのウェブサイトにリンクしているページには、jQueryへの参照が含まれていません。ここでは、上記のコードの完全な実装に伴い、あなたがそれを行う必要があります方法は次のとおりです。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
$('button').toggle(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
});
</script>
</head>
はまた、あなたが唯一のCSSトランジションを使用して、クラスを切り替えることによって、これを簡素化することができますのでご注意：
#sidebarright {
/* UI styling rules here */
left: 0;
transition: left 0.5s
}
#sidebarright.open {
left: 200;
}
$('button').click(function() {
$('#sidebarright').toggleClass('open');
});
jQueryスクリプトを使用していますが、ヘッダーにjQueryファイルを添付していません。 ヘッダーにjQueryファイルを追加してください。 http://www.jquery.com
これは、既存の受け入れられた答えにすでに言われています。あなたの答えは価値のある広告または代替の解決策を提供しません。 – Raju
それはうまくいきません。少なくとも何かをやることができましたが、私のサイドバーが右側にあることを気にしないでください。助けてください。私はあなたの2番目の方法を使用しています –
私はいくつか微調整を行いましたが、今は動作しますが、ページを開くとすぐに自動的に消えます。 –
私の間違い、私はあなたの答えを更新しました。 –