HTML:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
CSS:
ul{ /*在FF和IE8情况下,默认padding-left40px;只用padding-left为10px,可达到预期效果*/ padding-left: 10px; /*用360浏览器测试了下(估计IE7也是这个情况,IE6应该没人用了吧,Mic都抛弃了),没有预期效果,需要加上margin-left: 10px;,达到预期效果*/ /*list-style: none;*/ margin-left: 10px; } .jia{ list-style-image:url(jia.jpg); } .jian{ list-style-image: url(jian.jpg); } .none{ /*没有图片样式,即为默认样式*/ list-style-image:none; }
Jquery:
$('li.address').addClass('jia'); // 在FF和IE8情况下, $('li.address').children('ul').addClass('none'),可达到预期效果。除了li.address,其他的均是默认样式。如果把class(none)的属性改为list-style:none,则FF和IE8同样达到预期效果,但是360没有,出现每个列表项前都有一个加号 $('li.address').children('ul').addClass('none'); // 在360下达不到,需要加入$('li.address').children().css('list-style', 'none'),如果把class(none)的属性改为list-style:none,如果加下面的语句,360同样没有效果,也是所有的列表项前有个加号。需先把class(none)的属性改为list-style-image:none,再list-style:none。似乎必须要回归原始的样式,才能清除样式。如果开始就改变成其他的样式图片,然后再list-style:none。则360下没有预期效果,依然是所有的列表项前出现加号。 $('li.address').children().css('list-style', 'none'); $('li.address').children().hide(); $('li.address').each(function(index){ $(this).click(function(event){ // alert索引看看,会发现点击'温州'的时候,会先弹出1然后再弹出0,在后再展开内容。这里有个事件冒泡。故下面加了event.stopPropagation(); // alert(index); // 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(); } }); });
截图: