多个可折叠列表只有html / css [英] Multiple collapsable lists with just html/css

问题描述

所以我想创建一些你可以点击，它会展开一个列表，再次点击它应该崩溃。我想这样做没有jquery / javascript。我在这里找到的代码给了我所需要的，有一个问题，有多个不同的扩展列表。当添加第二个列表时，单击第一个将导致它们都打开，但是只是点击第二个将只展开/折叠自身（期望的结果）。

  [id ^ =togList]〜.list，/ * HIDE LIST * / [id ^ =togList] +标签跨度+跨度，/ * HIDECollapse* / [id ^ =togList]：checked + label span {/ * HIDEExpand（IF CHECKED）* / display：none; } [id ^ =togList]：checked + label span + span {display：inline-block; / * SHOWCollapse（IF CHECKED）* /} [id ^ =togList]：checked〜.list {display：block; / * SHOW LIST（IF CHECKED）* /}  

  ; div class =row> < input id =togList1type =checkbox> < label for =togList1> < a href =h>行星< / a> < span>˅< / span> < span>< / span> < / label> < div class =list> < p>无论什么mutho。< / p> < / div> < input id =togList2type =checkbox> < label for =togList2> < a href =h>香蕉吊床< / a> < span>˅< / span> < span>< / span> < / label> < div class =list> < p> numba 2.< / p> < / div>< / div>  

解决方案

  [id ^ =togList]：checked〜.list 
  

这将对选中的复选框之后的每个 .list 应用 display：block 。

对于纯CSS标签，我建议您查看这篇文章 Functional CSS标签

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

= ] + label span + span，/ * HIDECollapse* / [id ^ =togList]：checked + label span {/ * HIDEExpand（IF CHECKED）* / display：none; } [id ^ =togList]：checked + label span + span {display：inline-block; / * SHOWCollapse（IF CHECKED）* /} [id ^ =togList]：checked〜.list {display：block; / * SHOW LIST（IF CHECKED）* /}

  ; div class =row> < div> < input id =togList1type =checkbox> < label for =togList1> < a href =h>行星< / a> < span>˅< / span> < span>< / span> < / label> < div class =list> < p>无论什么mutho。< / p> < / div>< / div> < div> < input id =togList2type =checkbox> < label for =togList2> < a href =h>香蕉吊床< / a> < span>˅< / span> < span>< / span> < / label> < div class =list> < p> numba 2.< / p> < / div>< / div>< / div>  

So I'm trying to create something you can click, and it will expand a list, click again and it should collapse. I want to do this without jquery/javascript. The code I found here gave me exactly what I needed, with one problem, having multiple different expanding lists. When a second list is added, clicking the first will result in them both opening, but just clicking the 2nd will only expand/collapse itself(the desired outcome). Is there anyway to accomplish this without adding an ungodly amount of CSS ?

    [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) */
    }

<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>

解决方案

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

This will apply display: block to every .list after the checked check-box.

For pure CSS tabs I would recommend to check this article about Functional CSS Tabs

If you really like your example, then you just need to wrap every group. See my example:

 [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) */
 }

<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>

这篇关于多个可折叠列表只有html / css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！