显示/隐藏嵌套的 div答案

【问题标题】：Showing / Hiding nested divs显示/隐藏嵌套的 div
【发布时间】：2016-08-15 15:28:59
【问题描述】：

您好，我希望有人可以提供帮助。

我正在构建一个网站，当单击上述其中一项时，该网站将具有一个主要的水平选项卡式菜单和一个辅助水平选项卡式菜单。在第二个选项卡式菜单之外，还有另一个子菜单，它会显示链接，一旦单击，就会在右侧显示内容。如下图所示。

为了尝试使逻辑正常工作，我构建了一些非常简单的测试页面来尝试显示和隐藏 div，但我似乎只能获得与显示第一个子菜单相同的效果。

因为（最终）这将是一个包含多个页面的大型站点，所以我在站点的根文件夹中组织了第一个菜单，在名为“pages”的子文件夹中组织了子菜单，在文件夹中组织了子子菜单称为“页面/资源页面”。

这是我的测试代码，1 顶层 - 根文件夹中的nest.html

<body onload="openLevel2();"> <!-- done to initially hide unwanted divs -->
<div id="home">Nested Div Test</div>
</br>
<div id="div1"> <a href="#" title="Nest1" class="level1Hyperlink" onclick="openLevel2(event,'nest1')">Nest 1 - located in root folder</a> </div>
<div id="nest1" class="level1HiddenDiv"> 
  <script>$( "#nest1" ).load( "pages/nest2.html" );</script> 
</div>
</body>

二级代码 - pages 文件夹中的nest2.html

<body>
<div id="div2"> <a href="#" title="Nest2" class="level2Hyperlink" onclick="openLevel3(event,'nest2')">Nest 2 - located in root/pages folder</a> </div>
<div id="nest2" class="level2HiddenDiv"> 
  <script>
$( "#nest2" ).load( "pages/resource_pages/nest3.html" );
</script> 
</div>
</body>

第三级代码 - pages/resource_pages 子文件夹中的nest3.html

<body>
<div id="div3"> <a href="#" title="Nest3" class="level3Hyperlink" onclick="openLevel4(event,'nest3')">Nest 3 - located in root/pages/resource_pages folder</a> </div>
<div id="nest3" class="level3HiddenDiv"> 
  <script>
$( "#nest3" ).load( "ca_nearby.html" );
</script> 
</div>
</body>

这是我的 javascript

function openLevel2(evt, scriptName) {
    // Declare all variables
    var i, level1Hyperlink, level1HiddenDiv;

    // Get all elements with class="level1HiddenDiv" and hide them
    level1HiddenDiv = document.getElementsByClassName("level1HiddenDiv");
    for (i = 0; i < level1HiddenDiv.length; i++) {
        level1HiddenDiv[i].style.display = "none";
    }

    // Get all elements with class="level1Hyperlink" and remove the class "active"
    level1Hyperlink = document.getElementsByClassName("level1Hyperlink");
    for (i = 0; i < level1Hyperlink.length; i++) {
        level1Hyperlink[i].className = level1Hyperlink[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(scriptName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Script for showing resource letter menu tabs
function openLevel3(evt, resourceName) {
    // Declare all variables
    var i, level2Hyperlink, level2HiddenDiv;

    // Get all elements with class="level2Hyperlink" and hide them
    level2HiddenDiv = document.getElementsByClassName("level2HiddenDiv");
    for (i = 0; i < level2HiddenDiv.length; i++) {
        level2HiddenDiv[i].style.display = "none";
    }

    // Get all elements with class="level2Hyperlink" and remove the class "active"
    level2Hyperlink = document.getElementsByClassName("level2Hyperlink");
    for (i = 0; i < level2Hyperlink.length; i++) {
        level2Hyperlink[i].className = level2Hyperlink[i].className.replace(" active", "");
    }   

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(resourceName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Script for showing resource letter sub menu tabs
function openLevel4(evt, letterName) {
    // Declare all variables
    var i, level3Hyperlink, level3HiddenDiv;

    // Get all elements with class="level3HiddenDiv" and hide them
    level3HiddenDiv = document.getElementsByClassName("level3HiddenDiv");
    for (i = 0; i < level3HiddenDiv.length; i++) {
        level3HiddenDiv[i].style.display = "none";
    }

    // Get all elements with class="level3Hyperlink" and remove the class "active"
    level3Hyperlink = document.getElementsByClassName("level3Hyperlink");
    for (i = 0; i < level3Hyperlink.length; i++) {
        level3Hyperlink[i].className = level3Hyperlink[i].className.replace(" active", "");
    }   

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(letterName).style.display = "block";
    evt.currentTarget.className += " active";
}

谁能发现我做错了什么？感谢您的关注。

【问题讨论】：

究竟是什么不起作用？
谢谢乔纳斯。页面加载正常，第二个链接的链接工作正常，此后它不起作用。
首先，调试你的代码。在多行中添加警报并观察是否符合您的预期。还要查看浏览器控制台。然后缩小您的代码，以提高浏览器加载时间和可读性。
异步加载附加代码会导致问题，我会尝试删除它
再次感谢乔纳斯。老实说，没有意识到您的异步评论的重要性。虽然我还不完全理解它，但我认为这可能是我的问题。目前正在查看here

标签： javascript html menu show-hide

【解决方案1】：

大量使用 js 和 html，可能会遇到可读性问题，所以我更喜欢纯 js 解决方案，这将使其更具可读性/更好的调试性：

var structure={
    name:"level1",
    links:[
         {
         name:"level2-1",
         links:[
                     {
                      name:"level3-1",
                      links:[]
                     },
                     {
                     name:"level3-2",
                     links:[]
                     }
                  ]
          },
          { name:"level2-2", ...
          }
       ]
     };

function show(element){
//add the name to header
 document.GetElementById("header").innerHTML=element.name;
linkcontainer=document.getElementById("linkcontainer");
linkcontainer.innerHTML="";
counter=0;
element.links.forEach(function(link){
    l=document.createElement("span");
    l.onclick=(function(element,counter){
         //this should create an onclick element
      return  function(){show(element.links[counter])};
    })(element,counter);
    l.innerHTML=element.links[counter].name;
    linkcontainer.appendChild(l);
    counter++;
    }
    }
 window.onload=function(){show(structure);}
 </script>
 <div id="header">should contain name</header>
 <div id="linkcontainer">should contain links</div>

这应该创建：

Level1
Level2.1
Level2.2

如果你点击 2.1 级：

Level2.1
Level3.3
Level3.4

我的 onclick 语句有问题：http://www.howtocreate.co.uk/referencedvariables.html

【讨论】：

再次感谢乔纳斯，你的两个帖子都让我坐下来思考我在做什么。 TBH 自从我做任何 javascript 以来大约 3 年前，但我想我现在已经解决了。我认为我需要将我的所有 javascript 从 html 文件中移出并将其移动到一个单独的 js 文件中，在加载基本 index.html 文件时应该读取它。此后，它将可用于通过加载命令加载的后续文件。再次感谢。
@Roger W：不用担心。但是，将js移动到文件中不会有太大变化...