jquery,多层ul嵌套,使用toggle()异常的问题。 10

网页文件:<body><divclass="division"><divclass="title"><h1></h1><h2>选择籍贯</h2><ahref="#"></... 网页文件:
<body>
<div class="division">
<div class="title"><h1></h1><h2>选择籍贯</h2><a href="#"></a></div>
<ul>
<li><h1 class="first"></h1><h2></h2><a href="#">北京市</a></li>
<li>
<ul>
<li><h3></h3><h1></h1><h2></h2><a href="#">市辖区</a></li>
<li>
<ul>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市东城区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市西城区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市朝阳区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市丰台区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市石景山区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市海淀区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市门头沟区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市房山区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市通州区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市顺义区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市昌平区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市大兴区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市怀柔区</a></li>
<li><h3></h3><h3></h3><h4 class="last"></h4><h5></h5><a href="#" class="town">北京市平谷区</a></li>
</ul>
</li>
<li><h3></h3><h1></h1><h2></h2><a href="#">县</a></li>
<li>
<ul>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市密云县</a></li>
<li><h3></h3><h3></h3><h4 class="last"></h4><h5></h5><a href="#" class="town">北京市延庆县</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>

jquery文件(jquery-1.7.1.js)
$(document).ready(function(){
$(".division ul li a:not(.town)").click(function(){
$(this).parent().next().toggle();
});
});

想解决的问题:
页面装入时,只显示"北京市",点击后,出现二级菜单"市辖区,县";点击二级菜单后,出现三级菜单"**区"或“**县”;

遇到的问题:
如果页面装入时,三级菜单均是显示状态时,关闭打开各级菜单均正常;但通过css文件设置二、三级菜单均为display:none后,点击一级菜单无反应,该显示的二级菜单不显示,不知何故,请指教!
展开
 我来答
鹤禧觉色2J
2016-12-26 · 超过36用户采纳过TA的回答
知道答主
回答量:255
采纳率:32%
帮助的人:32.6万
展开全部
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.first').parent().siblings().hide();
$(".division ul li a:not(.town)").click(function(){
$(this).parent().next().toggle();
});
});

</script>
</head>
<body>
<div class="division">
<div class="title"><h1></h1><h2>选择籍贯</h2><a href="#"></a></div>
<ul>
<li><h1 class="first"></h1><h2></h2><a href="#">北京市</a></li>
<li>
<ul>
<li><h3></h3><h1></h1><h2></h2><a href="#">市辖区</a></li>
<li style="display:none">
<ul>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市东城区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市西城区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市朝阳区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市丰台区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市石景山区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市海淀区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市门头沟区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市房山区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市通州区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市顺义区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市昌平区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市大兴区</a></li>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市怀柔区</a></li>
<li><h3></h3><h3></h3><h4 class="last"></h4><h5></h5><a href="#" class="town">北京市平谷区</a> </li>
</ul>
</li>
<li ><h3></h3><h1></h1><h2></h2><a href="#">县</a></li>
<li style="display:none">
<ul>
<li><h3></h3><h3></h3><h4></h4><h5></h5><a href="#" class="town">北京市密云县</a></li>
<li><h3></h3><h3></h3><h4 class="last"></h4><h5></h5><a href="#" class="town">北京市延庆县</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式