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将替换弹性框列表中的项目。我不希望隐藏的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;
}

这是codepen： http://codepen.io/anon/pen/MebMQg

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

1 个答案: