|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-3.1.1/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li.address').addClass('jia');
$('li.address').children('ul').addClass('none');
$('li.address').children().css('list-style', 'none');
$('li.address').children().hide();
$('li.address').each(function(index){
$(this).click(function(event){
// event保存着事件对象
// event.target保存着发生时间的目标元素.可以确定首先接收到事件的元素（即实际被点击的元素）.this引用的是处理事件的元素.
// 故如果 处理事件的元素等于初始就定义的事件对象的实际接收者 if(this==event.target){
if($(this).is('.jia')){
$(this).children().show(); $(this).removeClass('jia');
$(this).addClass('jian');
}else{
$(this).children().hide();
$(this).removeClass('jian');
$(this).addClass('jia');
}
// event.stopPropagation()终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
event.stopPropagation();
}
});
}); })
</script>
<style type="text/css">
ul{
padding-left: 10px;
margin-left: 50px;
}
.jia{ list-style-image:url("./images/ac1.gif");}
.jian{ list-style-image: url("./images/ac2.gif"); }
.none{ /*没有图片样式，即为默认样式*/ list-style-image:none; }
</style>
</head>
<body>
<ul>
<li class="address">中国
<ul>
<li>北京</li>
<li>杭州</li>
<li class="address">温州
<ul>
<li>鹿城区</li>
<li>瓯海区</li>
<li>龙湾区</li>
</ul>
</li>
</ul>
</li>
<li class="address">美国
<ul>
<li>华盛顿</li>
<li>纽约</li>
<li>休斯顿</li>
</ul>
</li>
<li class="address">英国
<ul>
<li>伦敦</li>
<li>伯明翰</li>
</ul>
</li>
</ul>
</body>
</html>
|
