jquery 简易menu

philipho123

<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隐藏掉，刚开始在这个问题上有些困惑，现在终于解决了。