Question

我有一个产品列表，点击后会显示一个内嵌的“弹出窗口”，其中包含所点击列表项的更多信息。

现在的问题是这个列表也是响应式的，所以在桌面上这个列表将是4列，平板电脑3列，移动2列等。

我知道我可以使用jquery来计算这些列表项，并确定需要在哪个'nth'项后显示这个'popup'块，但是在调整浏览器大小时我该如何实现呢？

我在jsfiddle中设置了一个示例。

$(".products li").click(function(e) {

  e.preventDefault();
  $(".products li").removeClass("active");
  $(this).addClass("active");
  $(".popup-holder").after( $(".product-popup") );

  var i = $(this).index();
  var r = 4;

  do {
    if ( i > r ) {
      r += 4;
      if ( i == r) {
        r += 4;
      }
    } else {
      i++;
    }
  }
  while ( i != r );

  $(".products li:nth-child("+i+")").after( $(".product-popup") );
  $(".product-popup").show();
  $(".product-popup span").text(i);

});

在我想要实现的目标示例下面

单击列表项后，弹出窗口显示在第4项之后：

调整浏览器大小后，“弹出窗口”应显示在第3项之后：

Answer 1

我会以不同的方式思考这个问题。我们的想法是首先将margin-bottom添加到当前元素以创建所需空间，然后使用绝对位置添加其下方的元素，并使用当前单击的元素计算顶部位置。

这是一个非常简化的示例，您可以详细说明考虑到不同的参数（动态内容，动态高度等），使计算更准确。

＆＃13;

$(".products li").click(function(e) {

  e.preventDefault();
  $(".products li").removeClass("active");
  $(this).addClass("active");
  var i = $(this).data('information');

  var top = $(this).position().top + $(this).height();
  $(".product-popup").css('top',top + 30);
  
  $(".product-popup").text(i);
  $(".product-popup").show();
  
});
window.onresize = function(event) {
  if($(".active").length) {
    var top = $(".active").position().top + $(".active").height();
    $(".product-popup").css('top',top + 30);
  }
};

＆＃13;

ul.products {
  display: block;
  padding: 0;
  list-style-type: none;
  flex-wrap:wrap;
}

ul.products li {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  width: 20.66666%;
  background-color: #f2f2f2;
  border: 1px solid #000;
  cursor: pointer;
}

ul.products li:before {
  content: '';
  display: block;
  padding-bottom: 50%;
  margin-bottom: 10px;
  width: 100%;
  background-color: #ccc;
}

ul.products li.active {
  background-color: red;
  margin-bottom:80px;
}

.product-popup {
  display: none;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  border: 1px solid #000;
  position:absolute;
  height:50px;
  left:5px;
  right:0;
  
}
.container {
  position:relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="products">
  <li data-information="More information 1">Example product 1</li>
  <li data-information="More information 2">Example product 2</li>
  <li data-information="More information 3">Example product 3</li>
  <li data-information="More information 4">Example product 4</li>
  <li data-information="More information 5">Example product 5</li>
  <li data-information="More information 6">Example product 6</li>
  <li data-information="More information 7">Example product 7</li>
  <li data-information="More information 8">Example product 8</li>
  <li data-information="More information 9">Example product 9</li>
  <li data-information="More information 10">Example product 10</li>
  <li data-information="More information 11">Example product 11</li>
  <li data-information="More information 12">Example product 12</li>
</ul>
<div class="popup-holder">
  <div class="product-popup"></div>
</div>

</div>

＆＃13;

<强>更新

以下是包含动态内容的演示：

＆＃13;

$(".products li").click(function(e) {

  e.preventDefault();
  $(".products li").removeClass("active").css('margin-bottom',5);
  $(this).addClass("active");
  var i = $(this).data('information');

  var top = $(this).position().top + $(this).height();
  $(".product-popup").css('top',top + 30);
  
  $(".product-popup").text(i);
  $(this).css('margin-bottom',$(".product-popup").outerHeight());
  $(".product-popup").show();
  
});
window.onresize = function(event) {
  if($(".active").length) {
    var top = $(".active").position().top + $(".active").height();
    $(".product-popup").css('top',top + 30);
    $(".active").css('margin-bottom',$(".product-popup").outerHeight());
  }
};

＆＃13;

ul.products {
  display: block;
  padding: 0;
  list-style-type: none;
  flex-wrap:wrap;
}

ul.products li {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  width: 20.66666%;
  background-color: #f2f2f2;
  border: 1px solid #000;
  cursor: pointer;
}

ul.products li:before {
  content: '';
  display: block;
  padding-bottom: 50%;
  margin-bottom: 10px;
  width: 100%;
  background-color: #ccc;
}

ul.products li.active {
  background-color: red;
}

.product-popup {
  display: none;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  border: 1px solid #000;
  position:absolute;
  left:5px;
  right:0;
  
}
.container {
  position:relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="products">
  <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 1</li>
  <li data-information="More information 2">Example product 2</li>
  <li data-information="More information 3">Example product 3</li>
  <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 4</li>
  <li data-information="More information 5">Example product 5</li>
  <li data-information="More information 6">Example product 6</li>
  <li data-information="More information 7">Example product 7</li>
  <li data-information="More information 8">Example product 8</li>
  <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 9</li>
  <li data-information="More information 10">Example product 10</li>
  <li data-information="More information 11">Example product 11</li>
  <li data-information="More information 12">Example product 12</li>
</ul>
<div class="popup-holder">
  <div class="product-popup"></div>
</div>

</div>

＆＃13;

Answer 2

我完成了下一个元素的位置。当您调整浏览器大小时，它也可以正常工作。

＆＃13;

glutPostRedisplay

＆＃13;

var cIt=null;
$(".products li").click(function(e) {

  e.preventDefault();
  cIt=$(this);
  showDetails($(this));
  
});

window.onresize = function(event) {
    if(cIt!=null)
      showDetails(cIt);
};
function showDetails(item){

  $(".products li").removeClass("active");
  item.addClass("active");
  $(".popup-holder").after( $(".product-popup") );

   var i = item.index() +1;

  var elem=item;
  

  while(elem.next().position().top==elem.position().top)
  {
  	elem=elem.next();
  }
  elem.after( $(".product-popup") );
  $(".product-popup").show();
  $(".product-popup span").text(i);
}

＆＃13;

ul.products {
  display: block;
  padding: 0;
  list-style-type: none;
}
ul.products li {
  display: inline-block;
  padding: 10px;
  margin: 0 2% 10px 0;
  width: 20.66666%;
  background-color: #f2f2f2;
  border: 1px solid #000;
  cursor: pointer;
}
ul.products li:nth-of-type(4n+4) {
  margin: 0 0 1% 0;
}
ul.products li:before {
  content: '';
  display: block;
  padding-bottom: 50%;
  margin-bottom: 10px;
  width: 100%;
  background-color: #ccc;
}
ul.products li.active {
  background-color: red;
}

.product-popup {
  display: none;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  border: 1px solid #000;
}

＆＃13;

单击项目行后的Div块（响应）

2 个答案: