0

我有一个页面，其中有一排响应式框......

因此，您调整窗口大小越小，每行上的框数就越少

这是一个小提琴来告诉你发生了什么

http://jsfiddle.net/abtPH/6/

现在的行为是......如果你点击一个框，那么它下面会出现一个 div ......如果你点击下一个框，div 会向上滑动一点然后向下滑动以显示新内容.. .

我想要它，以便如果该框位于同一行并且用户单击下一个框，它不会向上滑动然后向下滑动，而是将内容淡入

我只希望它在盒子位于不同行时向上滑动......就像在下面

继承人我的jQuery到目前为止

   $('li').on('click', function(e){
     $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
     $(this).find('.outer').slideToggle();
     $(this).toggleClass('active', 400);
    });
4

1 回答 1

1

诀窍是检测同一行上的内容。为此，我认为该position()功能是您所需要的。单击列表项时，检查是否已经存在活动项，如果有，请检查当前项和活动项是否具有相同的最高值。如果他们确实交叉淡入淡出，否则切换。

$('li').on('click', function(e){
  var active = $(this).siblings('.active');
  var posTop = ($(this).position()).top;
  if (active.length > 0) {
    var activeTop = (active.position()).top;
    if (activeTop == posTop) {
      active.toggleClass('active', 400).find('.outer').fadeOut('slow');
      $(this).find('.outer').fadeIn('slow');
    } else {
      $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
      $(this).find('.outer').slideToggle();
    }
  } else {
    $(this).find('.outer').slideToggle();
  }
  $(this).toggleClass('active', 400);
});

jsFiddle

于 2013-08-15T01:21:29.117 回答