Javascript- 多级下拉 Div 定位？

Question

所以我试图用 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>

Answer 1

在我看来，问题在于您将 #extrabox 作为 #togglebox 的子项，而您确实希望将其作为兄弟项。事实上，#extrabox 将影响 #togglebox 下任何紧随其后的 block 级元素(作为兄弟元素)的定位。快速修复如下所示:

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

(我还继续修复了 ul 的子标签 a；ul 只需要 li 标记为 child 。)

同样，您需要将 #extrabox2 从 #extrabox 下移出，这样它就不会影响其 sibling 的位置。

我不确定您所说的“我还想将其设置为只能选择一个链接”是什么意思。你能澄清一下吗？

希望对您有所帮助!