jquery - 动画3 DIV的onClick

我有3个DIV，每个占33.3333％，应通过单击将其动画化。

<div id="wrapper">
<div id="left" class="links">LINKS</div>
<div id="middle" class="mitte">MITTE</div>
<div id="right" class="rechts">RECHTS</div>
<div class="clear"></div>

点击的DIV应该增加到60％，其他两者应减少到20％。

但是我没有jQuery的任何技能，因此我在网上搜索了解决方案。我发现的唯一解决方案是悬停而不是单击。

    $("#left, #middle, #right").each(function() {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #middle, #right").hover(function() {
    $(this).animate({
        width: "60%"
    }, 300 );
    $(this).parent().children().not(this).animate({
        width: "20%"
    }, 300 );
}, function() {
    $(this).parent().children().each(function() {
        $(this).animate({
            width: $(this).data("standardWidth")
        }, 300 );
    });
});

如您所见，将here与鼠标悬停可以正常工作，但是如何将其更改为单击呢？

有没有人可以帮助您？

提前致谢

索斯滕

最佳答案

将代码更改为：

$("#left, #middle, #right").each(function () {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #middle, #right").click(function () {
    $(this).animate({
        width: "60%"
    }, 300);
    $(this).parent().children().not(this).animate({
        width: "20%"
    }, 300);
});

jsFiddle example

我所做的只是将hover更改为click并删除了第二个功能。

这是一个second version，允许再次单击以恢复原始宽度。

$("#left, #middle, #right").each(function () {
    $(this).data("standardWidth", $(this).width());
});
$("#left, #middle, #right").click(function () {
    if ($(this).data('active')) {
        $(this).parent().children().each(function () {
            $(this).animate({
                width: $(this).data("standardWidth")
            }, 300);
        });
        $(this).data('active', 0);
    } else {
        $('#wrapper div').data('active', 0);
        $(this).data('active', 1);
        $(this).animate({
            width: "60%"
        }, 300);
        $(this).parent().children().not(this).animate({
            width: "20%"
        }, 300);
    }
});