<ul id="menu" style="width:300px;background-color:yellow">
<li><a style="width:100px;background-color:pink" href="#">1</a>
<ul>
<li style="background-color:red">1</li>
<li style="background-color:red">2</li>
<li style="background-color:red">3</li>
</ul>
</li>
<li><a style="width:100px;background-color:pink" href="#">2</a>
<ul>
<li style="background-color:red">1</li>
<li style="background-color:red">2</li>
<li style="background-color:red">3</li>
</ul>
</li>
<li><a style="width:100px;background-color:pink" href="#">3</a>
<ul>
<li style="background-color:red">1</li>
<li style="background-color:red">2</li>
<li style="background-color:red">3</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu > li > ul").css("display","none");
$("#menu > li").click(function(event){
if(event.target===this||event.srcElement===this){
if($(this).children("ul").css("display")==="block"){
$(this).children("ul").css("display","none");
}else{
$("#menu > li > ul").css("display","none");
$(this).children("ul").css("display","block");
}
}
});
});
</script>
如果不使用event.target===this(FF) || event.srcElement===this(IE)的判断,则在点下级li时也会将menu隐藏掉,刚开始在这个问题上有些困惑,现在终于解决了。