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

DRY solution for a JQuery animated navbar

本文关键字：DRY 解决方案 导航 JQuery 动画 用于      更新时间：2023-09-26

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

js小提琴示例

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

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

我尽力不将值硬编码到 jQuery 中，所以我会写一些类似于 taxicala 的答案的东西，没有硬编码值：

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

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

相关文章：