Question

我想要实现一些复杂的HTML / css组合。我可以连续使用任意数量的div，每个div都有一些与div有关的信息。 div在我的图片中表示为红色框。

每个div都有自己的蓝框，我希望通过HTML在其中，但通过css显示在它下面。这个蓝色框只应在单击div时显示，应该出现在div下面（以及该行中的所有其他行，但是超出下一行中的所有div），并且应该跨越父容器的整个宽度（因此它将是这张图片中5个红色div的宽度）。有可能这样吗？我想不出真正做这样的事情的方法。我已经创建了一个快速模拟的小提琴，你可以改变：https://jsfiddle.net/hL8r9fu9/

.wrapper {
  width:500px;
  background:white;
  height:500px;
}

.item {
  float:left;
  width: 18%;
  margin-right:2%;
  height:120px;
  background:red;
  margin-bottom:2%;
}

.info {
  height:20px;
  background:blue;
}

.info.is-hidden {
  display:none;
}

Answer 1

可以在另一行中确定行中的项目的一种方法是在元素上使用.offset().top（因为对于同一行中的所有div，该值将返回相同的值）。

$(document).ready(function(){
    $(".item").each(function(){
    var $this = $(this);
    $this.click(function(){
    $this.find(".info").toggleClass("is-hidden");
        if($this.offset().top > 10) // just an example value , you need to adjust this .
            $this.find(".info").css("top","0%");
    });
  });
});

工作示例：https://jsfiddle.net/DinoMyte/hL8r9fu9/3/

Answer 2

我能够使用以下jquery代码执行此操作：

$('.inherit-wrapper').each(function( element ) {
    var $this = $(this),
        property = $this.attr('wrapper-property'),
        value = $this.parent().parent().css(property);
    if(property && value) $this.css(property, value);
});

请参阅fiddle。我借用iConner从fiddle借用了这个函数。

如何在流畅的布局中为另一个div下面的div设置样式

2 个答案: