Question

我一直在尝试在这个网站上拼凑一个来自不同地方的剧本，但它还没有工作。我需要做的是点击一个div并让叠加div向下滑动，如果单击一个不同的div关闭prev div并向下滑动下一个div。这是我的工作小提琴：http://jsfiddle.net/G94Vm/

HTML：

<div class="item">
    <div class="item-overlay"></div>        
</div>
<div class="item">
    <div class="item-overlay"></div>
</div>

脚本：

$(document).ready(function () {
var open = $('.item'),
    a = $('div').find('.item-overlay');
open.click(function(){
    var $this = $('.item-overlay', this),
        speed = 300;
    $this.addClass('active').slideDown(speed);
    if ($this.hasClass('active') === true) {
        $this.removeClass('active').next('.item-overlay').slideUp(speed);
    } else if (a.hasClass('active') === false) {
        $this.addClass('active').next('.item-overlay').slideDown(speed);
    } else {
        a.removeClass('active').next('.item-overlay').slideUp(speed);
        $this.addClass('active').next('.item-overlay').delay(speed).slideDown(speed);
    }
});

}）;

这是我working on:的网站，现在只使用这个基本脚本：

$(document).ready(function () {
$('.item', this).click(function () {
    $('.item-overlay', this).slideToggle('400', function () {
        // end animation
    });
});

}）;

我还在学习jQuery，无法弄清楚我做错了什么。在这几个小时，任何帮助将非常感激。

谢谢！约翰

Answer 1

我的理解是，当您点击其父.item-overlay div时，您希望.item div内部向下滑动，以及是否有任何其他.item-overlay div对所有这些div都可见关闭？

这是一个有效的例子。目前，slideUp动画对我来说是一个小小的错误，但是这可能会给你你想要的东西（更新为使用slideToggle而不是slideDown ）：

$('.item').click(function () {
    $(this).find('.item-overlay').slideToggle('300').addClass('active');
    $(this).siblings().find('.active').each(function () {
        $(this).slideUp('300').removeClass('active');
    });
});

Answer 2

我刚刚更新了小提琴：

http://jsfiddle.net/G94Vm/10

您不需要所有这些if语句。只需关闭所有叠加层，然后再向下滑动。

$(document).ready(function () {
 $('.item').click(function(){
    var element = $('.item-overlay', this);
    var speed = 300;
    $('.item-overlay').removeClass('active').slideUp(speed);
    element.addClass('active').slideDown(speed);
});
});

你需要删除

.item-overlay {
    display:none;
}

因为你想将它向下滑动，如果它被隐藏直到滑落，那就不可能了。

Answer 3

你实际上以错误的方式使用next。我已经重写了你的jsFiddle，以便它完成动画，停止它应该，并听取外面的点击应关闭活动叠加。

链接是：http://jsfiddle.net/alexis_tondelier/Gf2dv/

目前的JS代码是：

$(document).ready(function () {
    var $active,
        togglerSelector = '.item',
        toggledSelector = '.item-overlay',
        $items = $(togglerSelector),
        animationDuration = 300,
        activeClassName = 'active',
        activeStyle = {height: 300},
        notActiveStyle = {height: 0}
        hideActive = function() {
            $active && $active
                .stop()
                .animate(notActiveStyle, function() {
                    $(this).removeClass(activeClassName).hide();
                });    
            $active = void 0;        
        },
        showActive = function($element) {
            $element && ($active = $element)
                .stop()
                .show()
                .animate(activeStyle)
                .addClass(activeClassName)
        };

    $items.on('click', function(event) {
        var $this = $(this),
            $overlay = $this.children(toggledSelector),
            theSame = $overlay.is($active);
        hideActive();
        theSame || showActive($overlay);
        }
    });
    $(this).on('click', function(event) {
        var $target = $(event.target),
            isOutClick = !$target.closest(togglerSelector).length;
        isOutClick && hideActive();
    });
});

它应该按照你想要的方式工作。

onClick addClass'active'mpallDown overlay div，close overlay div onClick next div

3 个答案: