javascript - 多层 ul/li 菜单错误

Question

我在制作多层菜单时遇到问题。

<style type="text/css">
body,input{font-family:Calibri,Arial}
#canopy{list-style:none;padding:0 0 0 0;width:170px}
#canopy li{display:block;background-color:#DBDBDB;font weight:bold;margin:1px;cursor:pointer;padding:5 5 5 7px;list-style:square;}
#canopy ul{list-style:none;padding:0 0 0 0;display:none}
#canopy ul li{font-weight:normal;cursor:auto;background-color:#fff;padding:0 0 0 7px}
#canopy a{text-decoration:none}
#canopy a:hover{text-decoration:underline}

#menu {
position: fixed;
    left: 0px;
top: 0px;
}

#page {
position: relative;
left: 200px;
top: 0px;
}
</style>

<div id="menu">
<ul id="canopy">

 <li>Continental View</li>
 <ul>
    <li><a href="#">United States</a></li>
    <li><a href="#">Canada</a></li>
    <li><a href="#">Alaska</a></li>
</ul>
<li>Regional View</li>
<ul>
    <li>Northeast</li>
    <ul>
        <li><a id="one" href="#" onclick="changeIt('image1');">2m Temperature</a></li>
        <li><a id="two" href="#" onclick="changeIt('image2');">2m Dew Point</a></li>
        <li><a id="three" href="#" onclick="changeIt('image3');">2m Relative Humidity</a></li>
        <li><a href="#">10m Wind Speed</a></li>
        <li><a href="#">10m Wind Gust</a></li>
        <li><a href="#">10m Wet Bulb Temp</a></li>
    </ul>

    </li>
    </ul>

<li>Metro View</li>
<ul>
    <li><a href="#">Boston</a></li>
    <li><a href="#">Burlington</a></li>
    <li><a href="#">New York City</a></li>


</ul>
</div>

Javascript:

<script>
$("#canopy > li").click(function(){
    if(false==$(this).next().is(':visible')){
        $('#canopy > ul').slideUp(200);
    }
    $(this).next().slideToggle(300);
});
$('#canopy > ul:eq(0)').show();
</script>

这是一个 Accordion 下拉菜单，结构应该是这样的:

地区
-东北
-2米温度

相反，Northeast 文件夹不会打开以显示其余元素。

Answer 1

HTML 格式不正确。你有

<ul>
    <li>Something</li>
    <ul>
        <!-- Elements -->
    </ul>

    </li>
</ul>

嵌套不正确，内部 <ul>应该进入 <li> ，即

<ul>
  <li>Something
      <ul>
          <!-- Elements -->
      </ul>
  </li>
</ul>

你也迷路了</li> s，以及封闭的 <ul>缺少结束标记。

---

至于 Javascript，我看到两个问题，都与嵌套有关:

1. 您正在切换 next()元素，这意味着点击 li将切换它的下一个 sibling(一旦 HTML 格式正确，它将是同一级别的另一个 li 或什么都不是)。相反，您想切换子列表，因此使用类似 children('ul') 的东西相反。
2. 您正在将点击事件处理程序关联到 #canopy > li ，即 li #canopy 的直接子元素，但是 Northeast 列表是一个 child 的 child 。你可以使用例如 $("#canopy > li > ul > li").click(/*...*/)反而，选择第二层 li