在jQuery中顯示/隱藏Div

Question

我有這個JSFiddle供參考： http ： //jsfiddle.net/422MP/38/

綠色框是向右浮動的，因此我只希望它們在展開其父div時顯示。 如果單擊另一個div，我希望隱藏前一個div的綠色框並顯示新的div。 有什么想法嗎？ 這是js：

$('.sidebar').on('click', function() {
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50)
        $(this).animate({width: 150}, 400);
    else
        $(this).animate({width: 50}, 400);
});

Answer 1

嘗試使用絕對位置定位它

.inner {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    left: 100px;
}
.sidebar {
    height: 300px;
    width: 50px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* left: 565px;*/
    /*position: relative;i*/
    margin:0 0px 0 10px;
}

演示： 小提琴

Answer 2

請試試這個

$('.inner').hide();
$('.sidebar').on('click', function() {
    $('.inner').hide();
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50){
        $(this).animate({width: 150}, 400);
        $(this).find('.inner').show();
    }
    else{
        $(this).animate({width: 50}, 400);
    }
});

請看小提琴

Answer 3

為什么不為內部類定義添加display: none ，然后使用jQuery執行類似的操作：

$('.sidebar').on('click', function() {
    //$('.sidebar').animate({width: 50}, 400);
    if ($(this).width() == 50)
        $(this).animate({width: 150}, 400).children(".inner").show();
    else
        $(this).animate({width: 50}, 400).children(".inner").hide();
});

的jsfiddle

Answer 4

CSS：

.inner{display:none;}

JavaScript的：

$('.sidebar').on('click', function() {
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50){
        $(this).animate({width: 150}, 400);
        $(".inner").fadeOut();
        $(this).children(".inner").fadeIn();
    }
    else{   
        $(this).animate({width: 50}, 400);
        $(".inner").hide();
    }        
});

Answer 5

首先隱藏所有內部div並顯示當前側邊欄的子內部

用你的js添加兩行代碼

$('.sidebar').on('click', function() {

$（ “內部”）隱藏（）。 $（本）。兒童（ '內。'）顯示（）。

$('.sidebar').not(this).animate({width: 50}, 400);
if ($(this).width() == 50)
    $(this).animate({width: 150}, 400);
else
    $(this).animate({width: 50}, 400);

}）;