Решение DRY для анимированного навигатора JQuery

Question

Я новичок в JQuery и веб-разработке в целом, и теперь я застрял в проблеме, которую я, похоже, не могу преодолеть. Я ищу DRY-решение для моей анимированной навигационной панели JQuery. Вы можете получить эту идею, взглянув на следующую несудовую версию:

$(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/

То, что я не понимаю, что как я могу контролировать высоту DIV в СУХОЙ контексте, так что, когда, например, # box1 щелкнут, он увеличивается в высоту от 50 пикселей до 100 пикселей, а другие divs уменьшаются с 100 пикселей до 50 пикселей в одно и то же время? Я ищу аналогичное поведение, как и для css-переходов. У меня есть еще один пример, иллюстрирующий, как здесь я думаю, что DRY версия будет выглядеть (надеюсь, это даст вам представление о том, что я после здесь):

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

Проблема со вторым примером является то, что при Я нажимаю eg # box2, то # box1 остается 100px, тогда как я хотел бы, чтобы он уменьшался в высоту от 100px до 50px. Я также пробовал некоторые решения removeClass/addClass, но пока не повезло.

Любая помощь очень ценится!

Answer 1

Попробуйте добавить класс .box вашим # Box1, # BOX2 и # Box3 элементов, и запустить этот код:

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

Answer 2

У вас уже есть все, что нужно на месте. Просто используйте 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

Answer 3

Я делаю все возможное, чтобы не жесткие значения кода в JQuery, так что я написал бы коснуться, похожие на taxicala's answer без жесткого закодированных значений:

<div id="box1" 
    class="js-box" 
    data-transition-default="50px" 
    data-transition-click="100px" > ... <div> 

jquery:

$('.js-box').on('click', function() 
{ 
    var $this = $(this); 
    $('.js-box').each(function() 
    { 
    if ($this == $(this)) 
    { 
     return; 
    } 
    var defaultHeight = $(this).data('transition-default'); 
    $(this).css({'height': defaultHeight , 'transition':'height 1s'}); 
    }); 

    var clickHeight = $this.data('transition-click'); 
    $this.css({'height':clickHeight , 'transition':'height 1s'}); 
}); 

Теперь это не ограничивается некоторыми конкретными значениями высоты (может быть обновлено и для перехода), поэтому его можно использовать повторно.