一个菜单效果的BUG

前面3次单击 都是正常的, 到了后面 就必须双击才有效果了,,求帮助啊..
<!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>