实现动态显示隐藏的树形菜单
- HTML code
<ul> <li class="PopItemStyle"> <a title="index.jsp" href="index.jsp" target="_self">主 页</a> </li> <li class="PopItemStyle"> <a title="survey.jsp" href="survey.jsp" target="_self">湘企集团</a> </li> <ul> <li class="ItemStyle"> <a title="survey.jsp" href="survey.jsp" target="_blank">公司概况</a> </li> <li class="ItemStyle"> <a title="people" href="people" target="_blank">灵魂人物</a> </li> <li class="ItemStyle"> <a title="history.jsp" href="history.jsp" target="_parent">发展历程</a> </li> <li class="ItemStyle"> <a title="culture.jsp" href="culture.jsp" target="_parent">企业文化</a> </li> <li class="ItemStyle"> <a title="honor.jsp" href="honor.jsp" target="_parent">社会荣誉</a> </li> </ul> <li class="PopItemStyle"> <a title="latest.jsp" href="latest.jsp" target="_self">新闻资讯</a> </li> <ul> <li class="ItemStyle"> <a title="latest.jsp" href="latest.jsp" target="_blank">公司动态</a> </li> <li class="ItemStyle"> <a title="news.jsp" href="news.jsp" target="_parent">行业资讯</a> </li> <li class="ItemStyle"> <a title="activities.jsp" href="activities.jsp" target="_parent">活动专题</a> </li> </ul></ul>
- JScript code
$(document).ready(function() { var pop = $(".PopItemStyle"); $(".ItemStyle").css("display","none"); pop.mouseover(function() { $(this).next("ul").children(".ItemStyle").toggle(); });});pop.mouseover(function() {
这里我用alert()试了，可以进来
当鼠标移上时，没反映，浏览器也没报错，firebug也试了
把toggle()写成toggle("show"), show() 或css("display","block")都 不行
问题应该就出现在这$(this).next("ul").children(".ItemStyle").toggle();
会不会是重复问题？
------解决方案--------------------------------------------------------
我认为可能是<ul>套<ul>出错.
因为改成
pop.mouseover(function(){
alert($(this)());
});
会发现它获取的根本不是lz希望得到的点..
lz请试一下换成div,应该不会出错了..时间仓促, 没有自己试一下, 楼主试一下吧