Question

我有一个项目列表，每个列表都包含一个默认情况下是隐藏的框，在单击每个列表后，应该显示该框。

现在的问题是在扩展列表之后，其他列表项也会被扩展。

请检查图像：

有什么办法可以仅扩展被单击的项目？

<li>
  user name test
  <div class="content">
    <span>
      A card can be used to display content related to 
      a single subject. The content can consist of multiple 
      elements of varying types and sizes.
    </span>
  </div>
</li>
<li>
  user name test
  <div class="content">
    <span>
      A card can be used to display content related to 
      a single subject. The content can consist of multiple 
      elements of varying types and sizes.
    </span>
  </div>
</li>

提琴：http://jsfiddle.net/8qLt3wru/4/

Answer 1

一种解决方法是像这样使用HTML <details>和CSS：

details {
  float:left;
  width: 50%;
    display:flex;
  flex-wrap:wrap;
}

<details>
    <summary>Details</summary>
    This is an example of the details disclosure.
</details>
<details>
    <summary>Details</summary>
    This is an example of the details disclosure.
</details>

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Answer 2

如果要显示SPAN文本但不压低其他元素，则必须将其重叠。这个例子不符合鲍克的建议。

CSS：

    summary{cursor:pointer}
    summary:focus{outline:none}

    details{display:inline-block}
    details > span{background:#f0f0f0;position:absolute;width:400px;}
    details > summary {list-style:none;}
    details > summary::-webkit-details-marker {display:none}

HTML：

<div style="width:400px">

    <li>
        <details closed>
            <summary>user name test A</summary>
            <span>
                A card can be used to display content related to 
                a single subject. The content can consist of multiple 
                elements of varying types and sizes.
            </span>
        </details>
    </li>
    <li>
        <details closed>
            <summary>user name test A</summary>
            <span>
                A card can be used to display content related to 
                a single subject. The content can consist of multiple 
                elements of varying types and sizes.
            </span>
        </details>
    </li>

</div>

单击列表并展开一个框

2 个答案: