主页 / 问题 / 1247791
Accepted
Dev18
Asked:2022-02-24 00:41:16 +0800 CST2022-02-24 00:41:16 +0800 CST

隐藏/显示列表

  • 772

像隐藏块，点击显示？我使用属性规则active ，<a> 但它显示列表，只有在延迟时，但我需要点击出现，第二次点击消失。

// 使用js不合适，我正在通过css寻找解决方案

.dropdown {
  visibility: hidden;
  display: none;
}

ul li:active>ul,
ul li ul:active {
  visibility: visible;
  display: block;
}
<ul>
  <li><a>1</a></li>
  <li><a>2</a></li>
  <li><a>3</a></li>
  <li>
    <a>4(доп список)</a>
    <ul class="dropdown">
      <li>а</li>
      <li>б</li>
      <li>в</li>
    </ul>
  </li>
  <li><a>5</a></li>
  <li><a>6</a></li>
</ul>

html

1 个回答

  1. Best Answer

    例如，您可以像这样

    .css-treeview div.dropdown ul {
  display: none;
}

.css-treeview div.dropdown>input:checked+ul {
  display: block;
}

input {
  visibility: hidden;
}

label {
  cursor: pointer;
}
    <div class="css-treeview">
  <ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li>
      <div class="dropdown ">
        <label for="mychk">4 (под список)</label>
        <input type="checkbox" id="mychk" />
        <ul>
          <li>а</li>
          <li>б</li>
          <li>в</li>
        </ul>
      </div>
    </li>
    <li><a>5</a></li>
    <li><a>6</a></li>
  </ul>
</div>

    • 0

相关问题