如何使隐藏的子div大于父级并在显示时按下一行？

时间：2017-03-28 03:43:48

标签： javascript jquery html css

http://codepen.io/zottewell-1471653998/pen/gmdQze

我正在尝试让每个可点击的图块在单击时显示相关内容并占据整个宽度。在上面的代码中，当单击子div时，它只会将一个“.tile”推到一边。在我的搜索中，我发现使用“.tile {position：absolute;}”将允许我让一个孩子比它的父母更大。我真的坚持这一点，并希望得到一些帮助。这是我的代码...... 

$(document).ready(function(){
        $(".tile").on("click", function(){
          $(".show").hide();
          $(this).children("div.show").toggle("fast");
        });
    });


 $(document).ready(function(){
        $(".tile").on("click", function(){
          $(".show").hide();
          $(this).children("div.show").toggle("fast");
        });
    });
* {
      width: 80%
      margin: 0 auto;
    }
    
    .tile {
      width: 25%;
      float: left;
    }
    
    .show {
      display: none;
      /* position: absolute;
      width: 100; */
    }
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>
    <div class="tile">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      <h3>TITLE</span></h3>
      <div class="show">
        <p>Some text</p>
      </div>
    </div>  
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2 个答案:

答案 0 :(得分：2)

随着视口大小增加而增加图像数量，您当前的实现无法帮助您实现它，因为您使用的浮动宽度为25％。这将始终强制每行4个图像。

作为您正在寻找的解决方案的一部分，请找到更新后的笔

Live Demo 

* {
  width: 80% margin: 0 auto;
}

.wrapper {
  clear: both;
}

.tile {
  width: 25%;
  float: left;
}

.show {
  display: none;
  /* position: absolute;
      width: 100; */
}
<div class="wrapper">
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>
  <div class="tile">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <h3>TITLE</span>
    </h3>
    <div class="show">
      <p>Some text</p>
    </div>
  </div>

</div>

这就是你要找的东西。不要发表评论道歉，因为我没有足够的声誉。 ：）

答案 1 :(得分：0)

我已更新您的笔以符合您的说明：     http://codepen.io/anon/pen/NpLoKr

我在所有瓷砖周围添加了一个flexbox包装，将您的商品对齐成行。我保持25％的宽度，但您可以根据需要更新。当您单击某个图块时，将切换显示文本类并向图块父级添加边距底部，这将推动下一行。

我还更新了你的点击处理程序，因为逻辑不一致所以它没有正确切换。如果您有任何问题，请告诉我。

$(document).ready(function(){
    $(".tile").on("click", function(){
      $(".tile:not(.show-text).show").hide();
      $(this).toggleClass("show-text");
      $(this).children("div.show").toggle("fast");
    });
});
* {
  width: 80%
  margin: 0 auto;
}

.tile-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.tile {
   width: 25%;
}

.tile.show-text {
  margin-bottom: 100px;
}

.show {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile-wrapper">
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
<div class="tile">
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  <h3>TITLE</span></h3>
  <div class="show">
    <p>Some text</p>
  </div>
</div>
</div>

相关问题
最新问题