Question

我是一个真正的菜鸟，每当我尝试实施任何这些东西时，它就会完全停止工作......

我的页面上有4个框，每个框都应按照小蓝色标签所朝向的方向展开和收缩。

我想知道的事情，我试图实现，但只是不知道，是否有一种方法我可以输入一些变量，所以相同的功能可以由其他框执行，但在不同的方向...

需要替换

.exp1，因此值为1-4的变量代替数字

例如/ .exp（变量值从1到4）

根据.exp采用的值，其他类变量数需要在代码中进一步向下更改

例如/ .box3需要是.box（变量值从1到4） .miniBox3将是.miniBox（变量值从1到4）最后.con1将是.con（变量值从1到4）

动画中的值和属性也需要更改

例如/而不是.animate（{bottom ...它可能是.animate（{left ...有一个新的va; lue喜欢30px而不是10px

在expandFunction（）中，规则是：

如果它是.exp1 ...则.box3关闭替换为.miniBox3，.box1展开，.exp1切换为.con1

如果它是.exp2 ...那么.box1关闭被.miniBox1替换，.box2扩展，.exp2切换到.con2

如果它是.exp3 ...那么.box4关闭被.miniBox4替换，.box3展开，.exp3切换到.con3

如果它是.exp4 ...那么.box2关闭被.miniBox2替换，.box4扩展并且.exp4切换到.con4

在contractFunction（）中，.box，.exp和.con数字都是一样的。

以下是代码：

$(document).ready(function () {

//function declared expand
$('.exp1').click(function(){
expandFunction();
});
});

//expand function properties
    function expandFunction(){
        if($(".box3").is(":visible"))
        {
        $('.box3').animate({left:'100%', top:'70px', width:'0px', height:'0px'}, 
        "slow", function(){
            $(this).switchClass("box3", "miniBox3", "slow");
            $('.exp3').hide();$('.miniBox3').show("fast");//hide blue bar, show box in sidebar

                        $('.box1').animate({bottom:'10px'}, "slow", function(){ //opens box right
                $('.exp1').unbind('click').removeClass('exp1').addClass('con1')
                            .click(function(){
                           contractFunction();
                            });
                             });
        });
        }
        else
                           {
        $('.box1').animate({bottom:'10px'}, "slow", function(){ //opens box right
            $('.exp1').unbind('click').removeClass('exp1').addClass('con1')
                        .click(function(){
                       contractFunction();
                        });
    });
    }
}
//};

function contractFunction(){
    $('.box1').animate({bottom:'46.5%'}, "slow", function(){
        $('.box1 div').unbind('click').removeClass('con1').addClass('exp1').click(function(){
            expandFunction();
        });
    });
}

这是 fiddle

（我的第一个问题是第一个框（左上角）扩展一次，合约一次然后不再做。它应该不断扩展并收缩到无穷大。解决方案如果有报告）

非常感谢你提前给我任何指示和帮助。

Answer 1

我只用了几件事就更新了你的fiddle。

我摆脱了div.miniBox，我认为他们没有必要满足你的需求。
我重写了您使用的css类，因此我可以执行动画，只需添加和删除classNames，每个框现在都有唯一的ID。
我添加到触发器divs data - 属性（感谢 html5 ）来存储相关框的ID以隐藏/显示，所以我可以使用jQuery.data()函数轻松地检索该值。

这里有html的样本

<div id="a1" class="box">
    <div class="exp" data-related="a3"></div>
    1
</div>

这里是我使用的代码

$(function () {
  $('.exp').click(function () {
    var exp = $(this);                          //this is the clicked trigger
    var parent = exp.parent();                  //this is the parent box
    var related = $('#' + exp.data('related')); //this is the related box

    if (exp.is('.con')) { // check if the box is expanded 
                          // i can do the same with  parent.is('.maxi')
      //expanded
      parent.removeClass('maxi' /* shrink the box */,
                         'slow',
                          function () { 
        exp.removeClass('con'); //now i know the parent box is no more expanded
        related.removeClass('mini', 'slow'); //restore the related box
      });
    } else {
      //collapsed
      related.addClass('mini' /* minimize the related box */,
                       'slow',
                       function () {
        exp.addClass('con'); //this to know if parent is expanded
        parent.addClass('maxi', 'slow'); //expand the parent box
      });
    }
  });
});

您可以查看此fiddle

编辑：所以，回答你的问题（如何用变量做）我说你可以将元素的状态用作变量本身。

jQuery使用变量，因此一个函数执行多个任务

1 个答案: