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下{（1）}之后的任何块级元素的定位。快速解决方案如下：

<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的{{1}}代码ul代码; ul仅将li个代码视为子代。）

同样，您希望#extrabox2从#extrabox下移出，这样就不会影响其兄弟姐妹的定位。

我不确定你的意思，＆＃34;我也希望能够选择只能选择一个链接的地方。＆＃34;你能澄清一下吗？

希望有所帮助！

Javascript-多级下拉Div定位？

1 个答案: