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进行操作，这会有些困难。

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

2 个答案: