Question

谁能用jquery写出来三级折叠左边菜单导航。。。急急急急急急

<div class="prolist">
<ul>
<li class="hover"><a href="#">高压电容器及成套设备</a>
<ul class="erji">
<li class="hover"><a href="#">树脂浇注电缆接头</a>
<ul class="sanji">
<li><a href="#">第三级产品类别1</a></li>
<li><a href="#">第三级产品类别1</a></li>
<li><a href="#">第三级产品类别1</a></li>
</ul>
</li>
<li class="hover"><a href="#">1kV树脂浇注电缆接头</a>
<ul class="sanji">
<li><a href="#">第三级产品类别2</a></li>
<li><a href="#">第三级产品类别2</a></li>
<li><a href="#">第三级产品类别2</a></li>
</ul>
</li>
<li class="hover"><a href="#">电缆分接箱</a>
<ul class="sanji">
<li><a href="#">第三级产品类别3</a></li>
<li><a href="#">第三级产品类别3</a></li>
<li><a href="#">第三级产品类别3</a></li>
</ul>
</li>
<li class="hover"><a href="#">欧式电缆分接箱美式电缆分接箱</a>
<ul class="sanji">
<li><a href="#">第三级产品类别4</a></li>
<li><a href="#">第三级产品类别4</a></li>
<li><a href="#">第三级产品类别4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Answer 1

如果你的列表里是静态数据的话，建议这个活给美工做，如果三级菜单的数据都是动态数据，推荐你看一下jquery的ztree插件，如果让别人帮你写代码，估计没人会帮你写

Answer 2

<script src="jquery.1.10"></script><script type="text/javascript">$(function(){
$(".prolist ul li a").click(function(){ $(this).next("ul").slideToggle("normal"); $(this).parent("li").siblings().has("ul").children("ul").slideUp("normal"); });
})</script>

这是按照你的静态代码弄得。这个不管多少级都可以

Answer 3

<script src="jquery.1.10"></script>
<script type="text/javascript">
$(function()
{
$(".prolist .hover").mouseover(function()
{
$(this).addClass("divCurrColor").next(".erji .hover").css("display","block")
})
$(".erji .hover").mouseover(function()
{
$(this).addClass("divCurrColor").next(".sanji").css("display","block")
})
.......//按照这个思路吧，我是个初学者学的不够好
})
</script>

Answer 4

看起来也是动态的 用 zTree