web-dev-qa-db-ja.com

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

私は2つ持っています <div>sとID AおよびB。 div Aの幅は固定されており、サイドバーとして使用されます。

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

Layout

スタイリングは以下のようなものです。

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を使用してこれを行うにはどうすればよいですか？

javascriptjquerycssjavascript-events
25
blasteralfred Ψ
$('button').toggle(
function() {
    $('#B').css('left', '0')
}, function() {
    $('#B').css('left', '200px')
})

http://jsfiddle.net/hThGb/1/ で動作例を確認してください

また、 http://jsfiddle.net/hThGb/2/ でアニメーションバージョンを見ることができます

25
Hussein

プレビューについては this fiddle を参照し、 jquerys toggle および animate メソッドのドキュメントを確認してください。

$('#toggle').toggle(function(){
    $('#A').animate({width:0});
    $('#B').animate({left:0});
},function(){
    $('#A').animate({width:200});
    $('#B').animate({left:200});
});

基本的に、レイアウトを設定するプロパティをアニメーション化します。

より高度なバージョン：

$('#toggle').toggle(function(){
    $('#A').stop(true).animate({width:0});
    $('#B').stop(true).animate({left:0});
},function(){
    $('#A').stop(true).animate({width:200});
    $('#B').stop(true).animate({left:200});
})

これにより、前のアニメーションが停止し、アニメーションキューがクリアされ、新しいアニメーションが開始されます。

12
Kristoffer Sall-Storgaard

このソリューションについては、w3schoolにアクセスして、リンクを here にすると、確実に役立つ別の例もあります Take a look

4
Kajal Solanki

Javascriptを使用する

var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;

window.document.addEventListener("click", function() {

  if (side.clientWidth == 0) {
//    alert(side.clientWidth);
    side.style.width      = "200px";
    main.style.marginLeft = "200px";
    main.style.width      = (width - 200) + "px";
    togg.innerHTML        = "Min";
  } else {
//    alert(side.clientWidth);
    side.style.width      = "0";
    main.style.marginLeft = "0";
    main.style.width      = width + "px";    
    togg.innerHTML        = "Max";
  }

}, false);
button {
  width: 100px;
  position: relative; 
  display: block; 
}

div {
  position: absolute;
  left: 0;
  border: 3px solid #73AD21;
  display: inline-block;
  transition: 0.5s; 
}

#side {
  left: 0;
  width: 0px;
  background-color: red;
}
 
#main {
  width: 100%;
  background-color: white;    
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>
1
antelove

以下は、jQueryの新しいバージョンで動作します。

$(window).on('load', function(){

    var toggle = false;

    $('button').click(function() {
        toggle = !toggle;

        if(toggle){
            $('#B').animate({left: 0});
        }
        else{
            $('#B').animate({left: 200});
        }

    });
});
1
xkem
$('#toggle').click(function() {
  $('#B').toggleClass('extended-panel');
  $('#A').toggle(/** specify a time here for an animation */);
});

cSSで：

.extended-panel {
  left: 0px !important;
}
0
EMMERICH
$(document).ready(function () {
    $(".trigger").click(function () {
        $("#sidebar").toggle("fast");
        $("#sidebar").toggleClass("active");
        return false;
    });
});


<div>
    <a class="trigger" href="#">
        <img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
    </a>
</div>
<div id="sidebar">
</div>

代わりに、＃sidebarはur divのIDを指定します。

0
Jafar Ali