Question

数周来，我一直在解决问题上遇到困难，在SO上以及其他方面尝试各种不同的解决方案，但是我在实现它们方面一直没有成功..或者它们对我没有用。

基本上我想做的是；在一个网格结构中（使用slideToggle打开）底部的一个div或网格中的每个div，并且下面没有整个ROW滑下来！只是列中的行。即，在下面的网格示例中，如果我单击A，它将显示其下方的隐藏容器，然后E会向下滑动，而不是E的整个行！

1 | 2 | 3 | 4
--------------
A | B | C | D
--------------
E | F | G | H
--------------

我正在使用网格结构，因为它可以响应，这对我有帮助。

如何做到这一点，使下面的整行不动，仅单击已单击列中的行？

非常感谢！

这是简化版和CodePen：https://codepen.io/anon/pen/PyMqvb

<div class="box">

    <div class="container">

      <div class="item">
        <div class="body">
          <div class="title">Welcome</div>
          <button class="button">Reveal</button>
         </div>
      <div class='hidden-container'>Hello</div>
      </div>

      <div class="item">
        <div class="body">
          <div class="title">Welcome</div>
          <button class="button">Reveal</button>
         </div>
      <div class='hidden-container'>Hello</div>
      </div>

      <div class="item">
        <div class="body">
          <div class="title">Welcome</div>
          <button class="button">Reveal</button>
         </div>
      <div class='hidden-container'>Hello</div>
      </div>

      <div class="item">
        <div class="body">
          <div class="title">Welcome</div>
          <button class="button">Reveal</button>
         </div>
      <div class='hidden-container'>Hello</div>
      </div>

    </div>  
</div>

CSS：

.body {
 border: 1px solid red;
}
.button {
  margin-bottom: 10px
}
.item {
  margin-left: 5px;
  margin-right: 5px; 
  text-align: center;
}
.hidden-container {
  display:none;
  height: 30px;
border: 1px solid blue;
}
.box {
    width: 65%;
    margin: 0 auto;
}
.title{
  height: 80px;
  padding-top: 50px;
}
.container {
  padding: 8px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  margin-top: 20px
}
@media (max-width: 1100px) {

  .container {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
    grid-auto-rows: minmax(300px, auto);
  }
}

jQuery：

$(document).on('click', '.button', function () {
  $(this).parents('.item').find('.hidden-container').slideToggle()

});

网格结构内的SlideToggle影响下面的整行

0 个答案: