Question

我是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解决方案，但到目前为止还没有运气。

非常感谢任何帮助！

Answer 1

您已经拥有了所需的一切。只需使用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 2

尝试将.box类添加到＃box1，＃box2和#box3元素，然后运行以下代码：

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

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'});
});

现在它不仅限于高度的某些特定值（也可以更新为过渡），因此它更具可重用性。

JQuery动画导航栏的DRY解决方案

3 个答案: