Javascript jQuery-如果元素位于同一行上，则具有不同的事件

我有一个页面，页面上有一排响应的框

因此，窗口的大小越小，每行上的框的数量就会减少

这是一把小提琴，告诉你发生了什么事

现在的行为是……如果你点击一个框，它下面会出现一个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);
    });

---

诀窍在于检测同一条线上的内容。为此，我认为

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

---

太好了！activeTop上的.length是什么？单击列表项时，如果没有.active类的同级项，

$（this）.sides（'.active'）

将返回类似于

Object[]

，因此

active.length>0

只有在已经存在活动同级项时才为真。