JQuery在单击时为多个元素设置动画切换

我正在建立一个信息显示器；当用户单击缩略图时，在其下方会打开一个框，以显示该缩略图的特定信息（信息来自XHR，在JFIDLE中无法正常工作）。盒子的打开不是问题——我正在努力把盒子关好

我想做的是：

if (box is closed) {
    open box;
}

if (box for this thumb is open) {
    close box;
}

if (box for another thumb is open) {
   close other box;
   on complete of close, open new box;
}

我还想做一个单独的功能来关闭我可以附加到关闭框图标的框

---

我最好怎么做？我看不太清楚。

你没有回答你自己的问题吗

我过去做过的一种方法是在openbox中添加一个marker-css类。如果使用jqueryanimate，则可以通过使用完整回调将类添加到刚才打开的元素中，轻松地完成此操作

在触发动画的单击处理程序中，完成该操作后，执行以下操作： 1） 检查已单击/正在打开的元素是否具有已打开的类，如果是，则设置一些临时标志以指示这一点

2） 对打开类的所有元素执行jQuery搜索，并设置其关闭动画

3） 如果您的标志告诉您单击的元素尚未打开，请设置其打开的动画，否则不执行任何操作

这里有一个简化的例子，我有多个div，当单击时，它们会变得更大、半透明，但一次只能有一个div变大，单击已经扩展的div会将其缩小到正常值

$('div').on('click', pop);

function pop(event) {
    debugger;
    var alreadyPopped = false;
    if ($(event.target).hasClass('popped')) {
        alreadyPopped = true;
    }
    $('.popped').animate({
        height: 50, width: 50, opacity: 1
    }, 1000, "linear", function(e) {
      $('.popped').removeClass('popped');
    });

    if (!alreadyPopped) {
        $(event.target).animate({
        height: 200, width: 200, opacity: 0.5
    }, 1000, "linear", function(e) {
     $(event.target).addClass('popped');
    });
    }    
}

---

现场演示：

在玩了一段时间重新构建代码后，我找到了一个解决方案。我认为这其中的关键是使用index（）将单击的按钮标识为下一步所需操作的参考点

Javascript:

//store for dropdown activity: false=inactive/true=active
var ddopen = false;
//store for last clicked button
var index;

//Create and animate/activate dropdown container
$.fn.ddExpand = function (btnNo) {
    // Identify parents of the button clicked, amd create the animating container
    var btn = $('#'+btnNo);
    btn.parent().after('<div class="box"></div>');

    //load content into container
    $('.box').load('test2.html #content'+btnNo);
    $('.box').show().animate({'height':'300px'}, 1000, function () {
        $('.content').fadeIn();     
    });
    //Declare dropdown as open/active
    ddopen = true;
    // Store button index for later reference
    index = btnNo;
}

//Deactivate/close and delete dropdown container
$.fn.ddCollapse = function (btnNo) {
    $('.content').fadeOut();
    $('.box').animate({'height':'0px'}, 500, function () {
        $(this).remove();

        //If function parameter IS a number, reactivate dropdown according to new button index / else / Declare dropdown as closed/deactivated
        (btnNo!=false) ? $(this).ddExpand(btnNo) : ddopen = false;
    });

}

$('.button').on('click', function () {
    //Capture index of button
    var btnNo = $('.button').index(this);
    //Silently add index of button as id attribute to button for later reference. This will also allow for extensibility should more buttons be added.
    $(this).attr('id', btnNo);

    //If dropdown is inactive
    if (ddopen == false) {
        //active dropdown according to button index
        $(this).ddExpand(btnNo);
    } else { //if dropdown is already active
        //if the button clicked now is different to last button clicked
        if (btnNo != index) {
            //pass new button index on to collapse current dropdown and reactive with new index
            $(this).ddCollapse(btnNo);
        } else { //if button clicked now is the SAME as last button clicked
        // close/deactivate existing dropdown and return to default state
        $(this).ddCollapse(false);
        }
    }
});

//process close button added to loaded content
$('body').on('click', '.close', function () {
    // close/deactivate existing dropdown and return to default state
    $(this).ddCollapse(false);
});

//下拉活动的存储：false=inactive/true=active
var-ddopen=false；
//存储上次单击的按钮
var指数；
//创建并设置/激活下拉列表容器的动画
$.fn.ddExpand=函数（btnNo）{
//确定所单击按钮的父级，并创建动画容器
var btn=$（“#”+btnNo）；
btn.parent（）在（“”）之后；
//将内容装入容器
$（'.box'）.load（'test2.html#content'+btnNo）；
$（'.box'）.show（）.animate（{'height'：'300px'}，1000，函数（）{
$（'.content'）.fadeIn（）；
});
//将下拉列表声明为打开/活动
ddopen=true；
//存储按钮索引以供以后参考
指数=btnNo；
}
//停用/关闭和删除下拉列表容器
$.fn.ddCollapse=函数（btnNo）{
$（'.content'）.fadeOut（）；
$（'.box'）.animate（{'height'：'0px'}，500，函数（）{
$（this.remove（）；
//如果功能参数是一个数字，根据新按钮索引重新激活下拉列表/else/将下拉列表声明为关闭/停用
（btnNo！=false）？$（this）.ddExpand（btnNo）：ddopen=false；
});
}
$（'.button'）。在（'click'，函数（）{
//按钮的捕获索引
var btnNo=$（'.button'）。索引（此）；
//以静默方式将按钮的索引作为id属性添加到按钮以供以后参考。如果添加更多按钮，这也将允许扩展。
$（this.attr（'id'，btnNo））；
//如果下拉列表处于非活动状态
如果（ddopen==false）{
//根据按钮索引的活动下拉列表
$（此）.ddExpand（btnNo）；
}else{//如果下拉列表已处于活动状态
//如果现在单击的按钮与上次单击的按钮不同
如果（btnNo！=索引）{
//将新按钮索引传递到上，以折叠当前下拉列表，并使用新索引进行反应
美元（此）.ddCollapse（btnNo）；
}else{//如果现在单击的按钮与上次单击的按钮相同
//关闭/停用现有下拉列表并返回默认状态
$（此）.ddCollapse（假）；
}
}
});
//“处理关闭”按钮添加到加载的内容
$（'body'）。在（'click'，'close'，函数（）上{
//关闭/停用现有下拉列表并返回默认状态
$（此）.ddCollapse（假）；
});

HTML

很好的建议，与我已有的建议类似。但是，这假定正在单击的项目也是正在设置动画的项目。就我而言，不是这样。请看我的演示。我不明白为什么会有很大的不同。基本思想仍然是一样的，确保一切都已关闭，然后在需要时打开所需的div。只要您可以从单击的项目中找到目标项目，您就可以了。在这种情况下，您可以这样做，因为您总是在单击目标之后添加下拉列表。将此快速而脏的代码添加到if语句的底部，它应该可以执行您想要的操作<代码>if（！$（this）.next（）.hasClass（'dropdown'））{$（this）.after（''）；$（'dropdown'）.animate（{'height'：'300px'}，1000，函数（）{ddopen=true；$（this）.load（'http://www.simondoes.com.au/test2.html #content'+i，function（）{$（'#content'+i）.fadeIn（）；}）$（“#content'+i）.fadeIn（）；}）Toggle（）如果单击的项目是正在设置动画的项目，则可以使用。在我的例子中，正在设置动画的项目还没有添加到HTML中，jquery将其作为点击事件的一部分。

<div class="btnCase">
    <div class="button"></div>
</div>
<div class="btnCase">
    <div class="button"></div>
</div>
<div class="btnCase">
    <div class="button"></div>
</div>
<div class="btnCase">
    <div class="button"></div>
</div>
<div class="btnCase">
    <div class="button"></div>
</div>