javascript - jQuery动画导航栏的DRY解决方案

我一般对JQuery和Web开发都是陌生的，现在陷入了一个我似乎无法克服的问题。我正在为我的JQuery动画导航栏寻找DRY解决方案。您可以通过查看以下非DRY jfiddle来获得构想：

$(document).ready(function(){
$('#box1').on('click', function() {
    $('#box1').css({'height':'100px', 'transition':'height 1s'});
    $('#box2').css({'height':'50px', 'transition':'height 1s'});
    $('#box3').css({'height':'50px', 'transition':'height 1s'});
});

$('#box2').on('click', function() {
    $('#box1').css({'height':'50px', 'transition':'height 1s'});
    $('#box2').css({'height':'100px', 'transition':'height 1s'});
    $('#box3').css({'height':'50px', 'transition':'height 1s'});
});

$('#box3').on('click', function() {
    $('#box1').css({'height':'50px', 'transition':'height 1s'});
    $('#box2').css({'height':'50px', 'transition':'height 1s'});
    $('#box3').css({'height':'100px', 'transition':'height 1s'});
});

}）;

https://jsfiddle.net/cm70947/m06799xh/

我不明白的是如何在DRY上下文中控制div的高度，以便例如单击＃box1，它的高度从50px增加到100px，而其他div同时从100px减少到50px？我正在寻找与CSS转换类似的行为。我在这里还有另一个示例，说明了我认为DRY版本的样子（希望它会让您对我的想法有所了解）：

http://jsfiddle.net/cm70947/q2nxmaps/

第二个示例的问题是当我单击例如＃box2，然后＃box1保持100px，而我希望它的高度从100px降低到50px。我也尝试了一些removeClass / addClass解决方案，但到目前为止还没有运气。

任何帮助深表感谢！

最佳答案

您已经拥有所需的一切。只需使用this和.not(this)：

$(document).ready(function () {
    $('.box').on('click', function () {
        $(this).css({'height': '100px', 'transition': 'height 1s'});
        $('.box').not(this).css({'height': '50px', 'transition': 'height 1s'});
    });
});

jsFiddle example

关于javascript - jQuery动画导航栏的DRY解决方案，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28945929/