0

我一直在尝试从这个网站的各个地方拼凑一个脚本，但它还没有工作。我需要做的是单击一个 div 并让覆盖 div 向下滑动，如果单击不同的 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);
    }
});

});

这是我正在处理的网站：现在正在使用这个基本脚本：

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

});

我仍在学习 jQuery，无法弄清楚我做错了什么。在这里待了几个小时，任何帮助将不胜感激。

谢谢！约翰

4

3 回答 3

1

.item-overlay我的理解是，当单击其父div 时，您希望内部的div 向下滑动.item，并且是否还有其他.item-overlay可见的 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');
    });
});
于 2013-03-23T21:57:57.873 回答
0

我刚刚更新了小提琴：

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

因为你想把它滑下来，如果它在滑下来之前隐藏起来，那是不可能的。

于 2013-03-23T21:56:43.387 回答
0

您实际上使用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();
    });
});

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

于 2013-03-23T22:10:00.910 回答