如何使用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 Fiddle demo。

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

如何使Option1的下面的1.1和1.2保持可见？

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

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>

这是您的demo更新

Answer 2

如何在代码中添加一些JavaScript如下：

<table border="0">
    <tr>
        <td>
            <hr>
            <a href="#Option1">Options</a>
            <br>
            <hr>
        </td>
    </tr>
</table>
<div class="target">
    <div id="Option1">
        <a onclick ="document.getElementById('Option1.0').style.display='block'">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>