jQuery防止事件冒泡

HTML

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>demo</title>
 6 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
 7 <script type="text/javascript" src="js/jquery.js"></script>
 8 </head>
 9 <style>
10  *{padding: 0; margin: 0}
11  ul{list-style: none;}
12  body{margin: 50px;}
13  div{width: 200px; height: 24px; line-height: 24px; text-align: center; border:1px solid #ccc;}
14  ul{width: 200px; border:1px solid #ccc; display: none; margin-top: 10px;} 
15  ul li{height: 24px;line-height: 24px;}
16  ul li:hover{background: #cfcfcf;}
17 </style>
18 <body>
19 
20 
21 <div>请选择城市</div>
22 <ul>
23   <li>北京</li>
24   <li>天津</li>
25   <li>上海</li>
26   <li>重庆</li>
27 </ul>
28 
29 
30 </body>
31 </html>

jQuery代码

$(function(){

	$('div').click(function(e) {
		$('ul').show();
		e.stopPropagation();
	});
	$(document).click(function() {
		$('ul').hide();
	});
});