javascript - Javascript-多级下拉Div定位？

因此，我尝试使用CSS和JavaScript制作多级水平菜单。我有一个切换功能，显示子菜单的div容器，但是，当它显示时，它将链接推到容器下方。当我单击链接以显示div容器时，该容器如何显示在其余链接的下方。我也想在只能选择一个链接的地方进行设置，但我不知道如何做。我以前从未使用过JavaScript，而且对CSS还是很陌生。

我已经从代码中删除了几乎所有样式。但是这里是功能。

    #togglebox {
                display:none;

                }

    #togglebox li{
            display: inline-block;
              }
    #extrabox {
                display:none;
                background: #E6ECF2;
                text-align: center;
                min-width: 100%;
                }

    #extrabox li{
            display: inline-block;
                }
    #extrabox2 {
                display:none;
                background: #E6ECF2;
                text-align: center;
                min-width: 100%;
                }
    #extrabox2 li{
            display: inline-block;
                }

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

    <ul class="sub-menu" style="display:inline;">
    <a href="#"><li id="NSM1">Normal Sub Menu</li></a></td>
    <a href="#" onclick="toggle_visibility('togglebox');"><li id="SMEL">Sub-menu Item with Second Level</li></a>
    <a href="#"><li id="NSM2">Normal Sub Menu</li></a>
    <br />
        </ul>
            <div id="togglebox">
                        <a  href="#"><li id="NSSL1">[Normal Link]</li></a>
                        <a  href="#" onclick="toggle_visibility('extrabox');"><li id="SSL2">[Has extra Level]</li></a>
                        <div id="extrabox">
                            <a  href="#"><li id="sublinkea">3rd level item1</li></a>                    <a  href="#"><li id="sublinkeb">3rd level item2</li></a>                    <a  href="#"><li id="sublinkea">3rd level item3</li></a>
                            <a  href="#"><li id="sublinkeb">3rd level item4</li></a>
                    </div>
                    <a  href="#" onclick="toggle_visibility('extrabox2');"><li id="SSL3"><li id="sublinksc">[Has Extra Level]</li></a>
                                                    <div id="extrabox2">
                                                                <a  href="#"><li id="sublinkea">3rd level item1</li></a>
                                                                <a  href="#"><li id="sublinkeb">3rd level item2</li></a>
                                                                <a  href="#"><li id="sublinkea">3rd level item3</li></a>
                                                                <a  href="#"><li id="sublinkeb">3rd level item4</li></a>
                                                    </div>
                      <a  href="#"><li id="NSSL2">[Normal Link]</li></a>
                </div>
            </div>

最佳答案

在我看来，这样的麻烦是，当您真的想让它成为同级时，您将#extrabox作为#togglebox的子代。实际上，#extrabox将影响#togglebox下紧随其后的任何块级元素（作为同级元素）的位置。快速修复如下：

<div id="togglebox">
  <ul>
    <li id="NSSL1">
      <a  href="#">[Normal Link]</a>
    </li>
    <li id="SSL2">
      <a  href="#" onclick="toggle_visibility('extrabox');">
        [Has extra Level]
      </a>
    </li>
  </ul>
</div>
<div id="extrabox">
  <!-- put #extrabox contents here -->
</div>

（我还继续修复了属于a子元素的ul标记； ul仅将li标记作为子元素。）

同样，您希望将#extrabox2从#extrabox下移出，以免影响其同级的放置。

我不确定您是什么意思，“我也想在只能选择一个链接的地方使用它。”你能澄清一下吗？

希望有帮助！