0

私は2つのDIVを持っています

1つは右側、もう1つは左側

リンクを提供するコードを探しています。このリンクをクリックすると、両方の div が 100% に展開され (そのうちの 1 つが下にスライドすることを意味します)、もう一度クリックすると、元の状態に戻ります。

私はこれを試しました：

<style>
    #container {
       width:100%;
       height:500px;
       border: 1px solid red;
    }
    #left {
        width:45%;
        height:500px;
        float: left;
        border: 1px solid blue;
    }
    #right {
        width:45%;
        height:500px;
        float: left;
        border: 1px solid yellow;
    }
</style>

<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>  


<div id="container">
    <div id="left">
        LEFT
    </div>

    <div id="right">
        RIGHT 
    </div>
</div>

<script type="text/javascript">
    $('#container').click(function(){
        if (parseInt($('div#right').css('right'),10) < 0) {
            // Bring right-column back onto display
            $('div#right').animate({
                right:'0%'
            }, 1000);

            $('div#left').animate({
                width:'45%'
            }, 600);
        } else {
            // Animate column off display.
            $('div#right').animate({
                right:'-45%'
            }, 600);

            $('div#left').animate({
                width:'100%'
            }, 1000);
        }
    });
</script>
4

1 に答える 1

2

http://jsfiddle.net/u9Rgv/25/

#container
{
    width:300px;
}
#left,#right
{
    background-color:#000;
    width:10px;
    height:100px;
    overflow:hidden;
}

#left{
    float:left;
}
#right{
    float:right;
}

</p> 

$("a").click(function(){
    var $left = $("#left");
    if($left.css("width")=="10px")
        $left.animate({width: "100%"})
    else 
        $left.animate({width: "10px"});

    var $right = $("#right");
    if($right.css("width")=="10px")
        $right.animate({width: "100%"})
    else 
        $right.animate({width: "10px"});

});​
于 2012-09-04T19:04:23.563 に答える