0

演示在这里

我正在建立一个信息显示器；当用户单击缩略图时，会在其下方打开一个框以显示特定于该缩略图的信息（信息来自 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;
}

我还想创建一个单独的函数来关闭我可以附加到关闭框图标的框。

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

4

3 回答 3

0

Haven't you answered your own question? .toggle()

于 2013-02-14T05:20:23.567 回答
0

在玩了一段时间重建代码后，我找到了解决方案。我认为其中的关键是使用 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>
于 2013-02-14T17:01:43.500 回答
0

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

一旦你有了它，你的逻辑，在触发动画的单击处理程序中，执行以下操作：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/

于 2013-02-14T05:41:42.813 回答