jquery 表格(展開和折疊列表項)

HTML：

     <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();
                        }
                    });
                });

 截圖：