使用jquery最大化一个框

Question

当我点击一个面板链接"hello"或"Hi"时，该面板必须最大化，并且只有该面板必须显示在页面中，当我再次点击它时，它需要返回其原始位置，对于其他面板也是如此，我试着实现了，但在我离开的地方，当我点击hello链接时，它可以最大化，但也可以在页面中查看另一个面板。

 http://jsfiddle.net/Soni/tRen6/1/

<script>
$(function() {
    $("#container").sortable({
        handle: 'h1',
        scroll: false,
        revert: true,
        tolerance: 'touch'
    });
$(".button").toggle(function() {
        $(this).parent().animate({
            backgroundColor: "#0000",
            width: 1000,
        }, 500);
    }, function() {
        $(this).parent().animate({
            backgroundColor: "#000",
            width: 100,
        }, 500);
    });
});

Answer 1

这不是一种优雅的方式，但它可以

$(function() {
$("#container").sortable({
    handle: 'h1',
    scroll: false,
    revert: true,
    tolerance: 'touch'
});
$(".button").toggle(function() {
    $(this).parent().animate({
        backgroundColor: "#0000",
        width: 500,
    }, 500);
    $(".button").fadeOut();
    $(this).fadeIn();
}, function() {
    $(this).parent().animate({
        backgroundColor: "#000",
        width: 100,
    }, 500);
    $(".button").fadeIn();
    $(this).fadeIn();
});
});

看看它是否解决了。

你也可以看到下一个或之前

或者为每个元素创建一个类。

或者尝试使用eq（）计数。但我不知道你要用在哪里。