一个菜单效果的BUG前面3次单击 都是正常的, 到了后面 就必须双击才有效果了,,求帮助啊..HTML code!DOCTYP
一个菜单效果的BUG
前面3次单击 都是正常的, 到了后面 就必须双击才有效果了,,求帮助啊..
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="jquery-1.7.1.min.js"></script><style>ul li{ width:100px; border:#CCC solid 1px; cursor:pointer}ul li span{ width:100px; height:20px; background:#CCCCCC; display:inline-block}ul li ul{ display:none}</style></head><script>$(function(){ D_Span = $("ul li span"); D_Ul = $("ul li ul"); D_Span.attr("s","y"); D_Span.bind('click',function(){ var y = $(this).attr("s"); if(y == "y"){ D_Ul.not($(this)).slideUp(); $(this).next("ul").slideDown(); $(this).attr("s","n"); } else if(y == "n"){ $(this).next("ul").slideUp(); $(this).attr("s","y"); } });}) //end</script><body><ul> <li><span>1</span> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li><span>2</span> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li><span>3</span> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li></ul></body></html>[解决办法]
else if(y == "n"){
$(this).next("ul").slideUp();
如果每个节点分别点一次,那么所有节点的属性s都为n，根据你的逻辑，值为n时是把下一个ul收起来，那就只有收起来没有展开的动作，所以看上去什么也没有发生。