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并显示当前侧边栏的子内部

使用你的js添加两行代码

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

<强> $（＆＃34; .inner＆＃34）。隐藏（）; $（本）。儿童（＆＃39; .inner＆＃39）。显示（）;

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

}）;

在jQuery中显示/隐藏Div

5 个答案: