☰

jQueryを使用してサイドバーdivを切り替える（非表示/表示）方法 質問する

tag-icon • tag-icon javascript jquery css jquery-events
jQueryを使用してサイドバーdivを切り替える（非表示/表示）方法 質問する

<div>ID を持つ2 つの.divがありA、その幅は固定されており、サイドバーとして使用されます。BA

レイアウトは以下の図のようになります。

レイアウト

スタイリングは以下のようになります。

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#A, #B {
    position: absolute;
}
#A {
    top: 0px;
    width: 200px;
    bottom: 0px;
}
#B {
    top: 0px;
    left: 200px;
    right: 0;
    bottom: 0px;
}

トグル ボタンとして機能するものがあります<a id="toggle">toggle</a>。トグル ボタンをクリックすると、サイドバーが左側に隠れ、div がB伸びて空きスペースを埋めます。2 回目のクリックで、サイドバーが前の位置に再表示され、div がB以前の幅に戻ります。

jQuery を使用してこれを実行するにはどうすればよいですか?

ベストアンサー1

$('button').toggle(
function() {
    $('#B').css('left', '0')
}, function() {
    $('#B').css('left', '200px')
})

動作例を確認するにはhttp://jsfiddle.net/hThGb/1/

アニメ版もご覧いただけますhttp://jsfiddle.net/hThGb/2/

おすすめ記事