顯示/隱藏的div jQuery中

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; 
} 

演示：Fiddle

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); 
    } 
}); 

Please see the fiddle

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並顯示當前的孩子內心側邊欄

添加的代碼2升行與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); 

}）;