jQuery-如果元素在同一行，则具有不同的事件

jQuery - have different events if element is on the same row

本文关键字：一行 事件 元素 如果 jQuery-      更新时间：2023-09-26

我有一个页面，其中有一行响应框。。。。。。。。

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

这里有一把小提琴向你展示的情况

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

诀窍是检测同一行上的内容。为此，我认为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

相关文章：