如何在显示隐藏的div时按下<li>？

Question

我正在尝试做某事但不确定是否有可能。

我有几个 li ，在每个 li 里面我都有一个隐藏的 div 和其他内容。当我点击 li 时， li 右下方会显示 div 并且宽度为100％。我遇到的问题是内容放在其他 divs 而不是推下它们。我知道使用绝对位置永远不会推迟内容，但我不知道如何给它100％的宽度。

我想将隐藏的 div 放在 li 下面，占据窗口宽度的100％，然后放置另一个 li ，如果有的话，低于内容。因此，如果我点击第一行中的任何 li ，隐藏的div将显示在此行下方，第二行中的 li 将在 DIV

您可以看到我的代码 here

欢迎对JS或CSS进行任何更改

我希望我已经解释得很好。你能帮我一点吗？

非常感谢！

$('.workContent').hide();

$('.containerGrid').click(function() {

  $('.workContent').hide();
  var idProject = $(this).parent().attr('data-content');
  $(idProject).show();

});

body {
  margin: 0;
  padding: 0;
}

.container {
  border: 1px solid #ff0000;
  margin: 0;
  padding: 0;
}

ul {
  padding: 0;
  margin: 0;
}

li.grid {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 20%;
  height: 200px;
  float: left;
  vertical-align: top;
  background-color: #00ff24;
}

li.grid:hover {
  background-color: #99f4a6;
}

.containerGrid {
  width: 100%;
  height: 200px;
}

.containerGrid h2 {
  padding: 0;
  margin: 0;
}

.workContent {
  height: 500px;
  border: 1px solid #000;
  width: 100%;
  position: absolute;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li class="grid" data-content="#project1">
      <div class="containerGrid">
        <h2>Title grid</h2>
      </div>
      <div id="project1" class="workContent">
        <p>Content 1</p>
      </div>
    </li>
    <li class="grid" data-content="#project2">
      <div class="containerGrid">
        <h2>Title grid</h2>
      </div>
      <div id="project2" class="workContent">
        <p>Content 2</p>
      </div>
    </li>
    <li class="grid" data-content="#project3">
      <div class="containerGrid">
        <h2>Title grid</h2>
      </div>
      <div id="project3" class="workContent">
        <p>Content 3</p>
      </div>
    </li>
    <li class="grid" data-content="#project4">
      <div class="containerGrid">
        <h2>Title grid</h2>
      </div>
      <div id="project4" class="workContent">
        <p>Content 4</p>
      </div>
    </li>
    <li class="grid" data-content="#project5">
      <div class="containerGrid">
        <h2>Title grid</h2>
      </div>
      <div id="project5" class="workContent">
        <p>Content 5</p>
      </div>
    </li>
    <li class="grid" data-content="#project6">
      <div class="containerGrid">
        <h2>Title grid</h2>
      </div>
      <div id="project6" class="workContent">
        <p>Content 6</p>
      </div>
    </li>
    <li class="grid" data-content="#project7">
      <div class="containerGrid">
        <h2>Title grid</h2>
      </div>
      <div id="project7" class="workContent">
        <p>Content 7</p>
      </div>
    </li>

  </ul>

</div>

Answer 1

以下是您如何做到这一点的反应：

• 给父母display:flex; flex-wrap: wrap;
• 使用while和.next()在点击的项目（$(e.target)）之后转到以下兄弟姐妹，直到找到开始新行的那个（您可以使用.position()确定这个）或者确定你是否在最后一排孩子身上
• 当您到达下一行的第一项时，.insertBefore()就是flex-basis: 100%;的div。用所需的内容填充它，或者通过从点击的div中克隆它或者在运行中生成它（这就是我的方式）。
• 当你点击一个新的孩子并且即将插入一个新的“大”时，不要忘记删除所有“大”（flex-basis:100%）孩子。
• 当你在最后一排（兄弟姐妹没有上一行）时，不要忘记也要覆盖这个案例。

我保证我会完成并为您精简它，解释您是否以及您做错了什么。但我希望你尝试一下，展示你的方法/最好的尝试。你在这里学习并变得更好。请记住，console.log()是您最好的朋友。

$('.expandables').on('click', '.item', function(e){
  // remove any open items
  removeItem($('.expandables>.content'));

  var item = $(e.target).closest('.item'), // clicked item
      content = item.find('.content'), // content
      nextItem = item.next(), 
      nextItemPosition = nextItem.position(); 
  while (nextItemPosition && (nextItemPosition.left > 20)) {
    // if no next, nextItemPosition will be undefined
    // if nextItemPosition.left is bigger than 1rem, we're not at start of row
    nextItem = nextItem.next(); //move to next item
    nextItemPosition = nextItem.position(); //set new position
  }

  if (nextItem.is('.item')) {
    // we're at the start of a new row
    content.clone().insertBefore(nextItem);  
  } else {
    // we reached the end of .expandables without finding a new row
    content.clone().appendTo($('.expandables'))
  }
})
function removeItem(item) {
  // Function to remove items (needed for animation purposes)
  // and in your case it needs to match the same animation for 
  // opening, if you want them synced.
  item.remove();	
}

$(window).on('resize', function(){
  // remove any open items
  removeItem($('.expandables>.content'));
})

.expandables {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  position: relative;
}

.expandables > div {
  flex-basis: calc(25% - 1rem);
}

@media (max-width: 991px) {
  .expandables > div {
    flex-basis: calc(33.33% - 1rem);
  }
}
@media (max-width: 767px) {
.expandables > div {
    flex-basis: calc(50% - 1rem);
  }
}
@media (max-width: 539px) {
  .expandables > div {
    flex-basis: calc(100% - 1rem);
  }
}
.expandables > div > .content {
  display: none;
}
.expandables > .content {
  flex-basis: calc(100% - 1rem);
}

/* above are just basics, covering positioning and layout 
 * below is a little basic styling
 */
body {margin:0;} *{box-sizing: border-box;}
.expandables {
  padding: .5rem;
}
.expandables>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  margin: .5rem;
}
.expandables>.content {
  background-color: #787878;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandables">
  <div class="item">
    <div>
      <h2>Title grid 1</h2>
    </div>
    <div class="content">
      <p>Content 1</p>
    </div>
  </div>
  <div class="item">
    <div>
      <h2>Title grid 2</h2>
    </div>
    <div class="content">
      <p>Content 2</p>
    </div>
  </div>
  <div class="item">
    <div>
      <h2>Title grid 3</h2>
    </div>
    <div class="content">
      <p>Content 3</p>
    </div>
  </div>
  <div class="item">
    <div>
      <h2>Title grid 4</h2>
    </div>
    <div class="content">
      <p>Content 4</p>
    </div>
  </div>
  <div class="item">
    <div>
      <h2>Title grid 5</h2>
    </div>
    <div class="content">
      <p>Content 5</p>
    </div>
  </div>
  <div class="item">
    <div>
      <h2>Title grid 6</h2>
    </div>
    <div class="content">
      <p>Content 6</p>
    </div>
  </div>
  <div class="item">
    <div>
      <h2>Title grid 7</h2>
    </div>
    <div class="content">
      <p>Content 7</p>
    </div>
  </div>
</div>

最终版本，打开/关闭animations。

另请注意，在部署之前，CSS应该autoprefix。如果你想要最大的浏览器兼容性，你可以将它设置为> 0%（在底部的小方框中）。