只有html / css

Question

所以我尝试创建可以点击的内容，它会展开一个列表，再次点击它就会崩溃。我想在没有jquery / javascript的情况下这样做。我在这里找到的代码给了我我需要的东西，有一个问题，有多个不同的扩展列表。添加第二个列表时，单击第一个列表将导致它们都打开，但只需单击第二个列表将仅展开/折叠（所需结果）。无论如何都可以在不添加不合理数量的CSS的情况下实现这一目标吗？

＆＃13;

＆＃13;

    [id^="togList"] ~ .list,
    /* HIDE LIST */
    [id^="togList"] + label span + span,
    /* HIDE "Collapse" */
    [id^="togList"]:checked + label span {
      /* HIDE "Expand" (IF CHECKED) */
      display: none;
    }
    [id^="togList"]:checked + label span + span {
      display: inline-block;
      /* SHOW "Collapse" (IF CHECKED) */
    }
    [id^="togList"]:checked ~ .list {
      display: block;
      /* SHOW LIST (IF CHECKED) */
    }

＆＃13;

<div class="row">
  <input id="togList1" type="checkbox">
  <label for="togList1">
    <a href="h">Planets</a>
    <span>˅</span>
    <span>˄</span>
  </label>
  <div class="list">
    <p>whatever mutho.</p>
  </div>
  <input id="togList2" type="checkbox">
  <label for="togList2">
    <a href="h">Banana Hammock</a>
    <span>˅</span>
    <span>˄</span>
  </label>
  <div class="list">
    <p>numba 2.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

[id^="togList"]:checked ~ .list

在选中复选框后，这将display: block应用于每个.list。

对于纯CSS标签，我建议您查看有关Functional CSS Tabs

的文章

如果你真的喜欢你的例子，那么你只需要包装每一组。看我的例子：

＆＃13;

＆＃13;

 [id^="togList"] ~ .list,
 /* HIDE LIST */
 [id^="togList"] + label span + span,
 /* HIDE "Collapse" */
 [id^="togList"]:checked + label span {
   /* HIDE "Expand" (IF CHECKED) */
   display: none;
 }
 [id^="togList"]:checked + label span + span {
   display: inline-block;
   /* SHOW "Collapse" (IF CHECKED) */
 }
 [id^="togList"]:checked ~ .list {
   display: block;
   /* SHOW LIST (IF CHECKED) */
 }

＆＃13;

<div class="row">
  <div>
    <input id="togList1" type="checkbox">
  <label for="togList1">
    <a href="h">Planets</a>
    <span>˅</span>
    <span>˄</span>
  </label>
  <div class="list">
    <p>whatever mutho.</p>
  </div></div>
  <div>
  <input id="togList2" type="checkbox">
  <label for="togList2">
    <a href="h">Banana Hammock</a>
    <span>˅</span>
    <span>˄</span>
  </label>
  <div class="list">
    <p>numba 2.</p>
  </div></div>
</div>

＆＃13;

＆＃13;

＆＃13;