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

Question

我一直在拼凑一个脚本从这个网站的各个地方，但它还没有工作。我需要发生的是点击一个div，并将覆盖div向下滑动，如果单击另一个div关闭prev 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格被点击其父.item DIV里面的时候滑下去，如果有任何其他.item-overlay的div可见它们全部收上来？

下面是一个工作示例。该效果基本show动画是目前对我来说有点越野车，但是这可能给你你以后（更新为使用的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(); 
    }); 
}); 

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