html - 如何使用 href 目标显示 div 和嵌套 div？

Question

我正在尝试创建一个这样的菜单：

如您所见，单击时会在其下方提供更多选项。使用一些仅使用 html 和 css 的可用示例代码，我可以制作这样的东西，但是我遇到了问题。

这是代码：

a {
  text-decoration: none;
  color: black;
}

.target {
  width: 50%;
  height: 200px;
  border: solid black 1px;
}

.target>div {
  display: none;
}

.target>div:target {
  display: block;
}

<table border="0">
  <tr>
    <td>
      <hr>
      <a href="#Option1">
                    Options
                  </a>
      <br>
      <hr>
    </td>
  </tr>
</table>

<div class="target">
  <div id="Option1">
    <a href="#Option1.0">Option 1</a>
  </div>

  <div id="Option1.0">

    <div id="Option1.1">
      Option 1.1
    </div>

    <div id="Option1.2">
      Option 1.2
    </div>

  </div>

</div>

JS 小提琴演示。

现在这段代码似乎可以正常工作，但是当单击 Option1 时，将显示选项 1.1 和 1.2，但是 Option1 会消失，这不是我想要的。

如何保持 Option1 在其下方的 1.1 和 1.2 可见？

https://jsfiddle.net/epnrsum8/1/] 3

标签： htmlcsshtml5-canvas

Answer 1

您刚刚错过了在 Option1.0 div 下的 HTML 中添加文本 Option 1

        <table border="0">
          <tr>
            <td>
              <hr>
              <a href="#Option1">
                Options
              </a>
              <br>
              <hr>
              </td>
          </tr>
        </table>

<div class="target">
    <div id="Option1">
         <a href="#Option1.0">Option 1</a>
    </div>

    <div id="Option1.0">
    Option 1
            <div id="Option1.1">
            Option 1.1
            </div>          

            <div id="Option1.2">
            Option 1.2
            </div>

    </div>

</div>

这是你的演示更新