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>

这是一个手风琴下拉菜单，结构应该是：

地区
-Northeast
-2m温度

相反，东北文件夹不会打开以显示其余项目。

Answer 1

HTML格式不正确。

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

    </li>
</ul>

哪个没有正确嵌套，内部<ul>应该进入<li>，即

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

您还有流浪</li>，并且封闭的<ul>缺少结束标记。

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

您正在切换next()元素，这意味着点击li将切换其下一个兄弟（一旦HTML格式正确，将会是另一个li在同一级别或没有）。相反，您想要切换子列表，因此请使用类似children('ul')的内容。
您将点击事件处理程序与#canopy > li相关联，即li元素是#canopy的直接子元素，但是 Northeast 列表是孩子的孩子。您可以使用例如$("#canopy > li > ul > li").click(/*...*/)，选择第二级li

多层ul / li菜单错误

1 个答案: