<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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保存著事件對(duì)象
// event.target保存著發(fā)生時(shí)間的目標(biāo)元素.可以確定首先接收到事件的元素（即實(shí)際被點(diǎn)擊的元素）.this引用的是處理事件的元素.
// 故如果 處理事件的元素等于初始就定義的事件對(duì)象的實(shí)際接收者 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()終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播。調(diào)用該方法后，該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點(diǎn)。
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{ /*沒有圖片樣式，即為默認(rèn)樣式*/ list-style-image:none; }
</style>
</head>
<body>
<ul>
<li class="address">中國
<ul>
<li>北京</li>
<li>杭州</li>
<li class="address">溫州
<ul>
<li>鹿城區(qū)</li>
<li>甌海區(qū)</li>
<li>龍灣區(qū)</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>
聯(lián)系客服
