Demo here

Question

Demo here

我正在构建一个信息显示器;当用户点击缩略图时，会在其下方打开一个框以显示特定于该缩略图的信息（信息来自XHR，在jfiddle中无法正常工作）。盒子的打开不是问题 - 我正试图让盒子正确关闭。

我想做的是：

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

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

我最好怎么做？我看不出有多清楚。

Answer 1

你没有回答你自己的问题吗？ .toggle()

Answer 2

我过去做过的一种方法是在打开的框中添加一个标记css类。如果您使用完整的回调将类添加到刚刚打开的元素中，则可以轻松地使用jQuery动画。

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

2）对具有已打开类的所有元素执行jQuery搜索，并为其结束设置动画。

3）如果你的旗帜告诉你点击的元素尚未打开，请将其打开动画，否则什么都不做。

这是一个简化的例子，我有多个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');
    });
    }    
}

现场演示：http://jsfiddle.net/ijoukov/zA87j/1/

Answer 3

在玩了一段时间重建代码后，我找到了解决方案。我认为关键在于使用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);
});

HTML

<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>

JQuery动画切换点击多个元素

Demo here

3 个答案: