在网格中向下滑动div的底部，而不滑动整个行。

Question

我正在使用CSS处理网格结构。 网格内有面板，每个面板内有一个按钮，底部有一个隐藏的div。

单击按钮时，隐藏的div向下滑动（使用jQuery slideToggle）。 行和列中有多个面板。

我有一个问题，当单击按钮向下滑动时，整个行都会向下滑动-不仅是正下方的行！

我如何才能使其仅向下滑动其下方的面板，而不是整个下一行？

我创建了一个JSFiddle： http : //jsfiddle.net/xpvt214o/873688/

这是我一直在尝试的代码！

谢谢！

的HTML

<div id="expand-box">
  <div class="wrapper">
    <div id="handlebars-sandbox">

      <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

      <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

      <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

       <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

    </div>  
  </div>
</div>

的CSS

.panel {
  border: 1px solid black; 
  margin-left: 5px;
  margin-right: 5px; 
  text-align: center;}

#reveal-container {
  display:none;
  height: 30px}

#expand-box {
    width: 65%;
    margin: 0 auto;}

.wrapper {
  margin: 0 auto;
  width: 100%;}

.title{
  height: 80px}

#handlebars-sandbox {
  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) {
  .wrapper {
    grid-template-columns: 1fr;
  }

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

@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}

JS

/* REVEALS REVEAL CONTAINER*/
$(document).on('click', '.button', function () {
  $(this).parents('.panel').find('#reveal-container').slideToggle()

});

Answer 1

您需要做的就是将id ='reaveal-container'更改为class。 ID必须是唯一的。 它可以在页面上执行一次。 当我将其更改为课堂内容时，一切正常。

 /* REVEALS REVEAL CONTAINER*/ $(document).on('click', '.button', function () { $(this).parents('.panel').find('.reveal-container').slideToggle() }); 

 .panel { border: 1px solid black; margin-left: 5px; margin-right: 5px; text-align: center;} .reveal-container { display:none; height: 30px} #expand-box { width: 65%; margin: 0 auto;} .wrapper { margin: 0 auto; width: 100%;} .title{ height: 80px} #handlebars-sandbox { 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) { .wrapper { grid-template-columns: 1fr; } #handlebars-sandbox { width: 100%; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ; grid-auto-rows: minmax(300px, auto); } } @supports (display: grid) { .wrapper > * { width: auto; margin: 0; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="expand-box"> <div class="wrapper"> <div id="handlebars-sandbox"> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> </div> </div> </div> 

Answer 2

卡斯滕·洛夫博·安德森（CarstenLøvboAndersen）是对的，ID应该是唯一的，切换到类可能会导致错误。 我认为您对下一行打开感到困惑的不是ID或jQuery，而是您所使用的CSS的真正错误。

#handlebars-sandbox {
  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
}

您在使用边界和边缘显示时感到困惑，因为在使用display：grid;时，每个面板的边缘和边界都相互链接，而没有显示下一个。 在＃handlebars-sandbox上，有点像具有内联块。

我建议的是放一个最小高度：130像素； 在.panel下或只是摆脱网格并使用dispaly：block进行操作，这会有点困难。