html - 基于触发元素计数的绝对位置

Question

我有以下格式的 flexbox 列表，其中的每个元素在单击时都会显示一个隐藏的 div:

<ul class="items definitions">
        <li class="list__item closed" data-gk-close-span-glyph="active" data-gk-open-span-glyph=
        "closed" data-gk-open-class="3" data-gk-area-state="closed">Thing One</li>

        <li style="list-style: none">
            <div class="response-definition 3" style="display: none;">
                <p>One Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
        </li>

问题是，如果我将定位保留为 static，显示的 div 将取代 flexbox 列表中的元素。我不希望隐藏的 div 成为列表项的子项，这似乎让我处于将隐藏的 div 相对于 ul 列表本身放置的位置。

这是一个 pen for what I'm dealing with .

有没有办法根据列表项的数量更改 div 的位置？是这样的吗？

@for $i from 1 through length($mylist) {
     li:nth-of-type(#{$i}) {
             top: $i * 5em;
     }
}

随着列数的变化，每个媒体查询也需要不同。

Answer 1

为了演示目的，我已经更新了前四个 li 元素，标记明智。这意味着它们的其余部分在我的演示中暂时损坏，但您应该能够看到它基于此工作。也可以在删除剩余元素后稍微清理一下 css。

我做了哪些改变:

<li class="list__item active" data-gk-close-span-glyph="active" data-gk-open-span-glyph=
    "closed" data-gk-open-class="8" data-gk-area-state="closed">Thing Six</li>

<li style="list-style: none">
      <div class="response-definition 8" style="display: none;">
        <p>Six Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna urna, pretium eu
        pretium in, dictum nec nisl. Proin vehicula convallis mi, in vestibulum magna laoreet eget.
        Duis quis dignissim nibh, at aliquet elit. Mauris ultrices a sapien quis hendrerit.
        Pellentesque in nisi dui. Pellentesque commodo diam sapien, eget egestas elit rutrum
        sodales. Etiam sapien nisi, pretium eu consequat ut, sollicitudin vitae erat.</p>
      </div>
</li>

新列表项结构:

<li class="list__item">
      <button class="btn active" data-gk-close-span-glyph="active" data-gk-open-span-glyph=
    "closed" data-gk-open-class="4" data-gk-area-state="closed">Thing Two</button>

      <div class="response-definition 4" style="display: none;">
        <p>Two Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna urna, pretium eu
        pretium in, dictum nec nisl. Proin vehicula convallis mi, in vestibulum magna laoreet eget.
        Duis quis dignissim nibh, at aliquet elit. Mauris ultrices a sapien quis hendrerit.
        Pellentesque in nisi dui. Pellentesque commodo diam sapien, eget egestas elit rutrum
        sodales. Etiam sapien nisi, pretium eu consequat ut, sollicitudin vitae erat.</p>
      </div>
</li>

还将 css 修改为:

.active, .closed {
    cursor: pointer;
    font-size: 1.4rem;
    list-style: outside none none;
    padding: 1rem;
    width: 100%;
    text-align: left;
}

.response-definition {
  max-width: 95%;
  position: absolute;
  background: black;
  z-index: 1000;
  margin-top: 10px;
  //left: 20px;
  }

.list__item .btn:hover, .list__item .btn:hover:focus
{
  background: rgba(0, 0, 0, 0.15);
  transition: all 1s;
  color: tomato;
}

删除这些:

.response-definition:nth-of-type(1) {
  //top: 5em;
}

.response-definition:nth-of-type(2) {
  //top: 10em;
  }

一旦你修改了所有你可能会改变这个:

.items .list__item {
  background: #e0ddd5;
  color: #171e42;
  box-sizing: border-box;
  margin-left: -10px;
  margin-right: 20px;
  list-style: none;
}

收件人:

.items .list__item {
  margin-left: -10px;
  margin-right: 20px;
  list-style: none;
}

这是代码笔: http://codepen.io/anon/pen/MebMQg