一个菜单成效的BUG _JavaScript

一个菜单效果的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收起来，那就只有收起来没有展开的动作，所以看上去什么也没有发生。