在網格中向下滑動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進行操作，這會有點困難。