<ul>
? ? <li>
? ? ? 主題市場
? ? ? <ul>
? ? ? ? <li>
? ? ? ? ? 運動派
? ? ? ? ? <ul>
? ? ? ? ? ? <li>三級菜單a</li>
? ? ? ? ? ? <li>三級菜單b</li>
? ? ? ? ? ? <li>三級菜單c</li>
? ? ? ? ? ? <li>三級菜單d</li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? 有車族
? ? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? 三級
? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>四級</li>
? ? ? ? ? ? ? ? <li>四級</li>
? ? ? ? ? ? ? ? <li>四級</li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>三級</li>
? ? ? ? ? ? <li>三級</li>
? ? ? ? ? ? <li>三級</li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>生活家</li>
? ? ? </ul>
? ? </li>
? ? <li>
? ? ? 特色購物
? ? ? <ul>
? ? ? ? <li>淘寶二手</li>
? ? ? ? <li>拍賣會</li>
? ? ? ? <li>愛逛街</li>
? ? ? ? <li>全球購</li>
? ? ? ? <li>淘女郎</li>
? ? ? </ul>
? ? </li>
? ? <li>
? ? ? 優惠促銷
? ? ? <ul>
? ? ? ? <li>天天特價</li>
? ? ? ? <li>免費試用</li>
? ? ? ? <li>清倉</li>
? ? ? ? <li>1元起拍</li>
? ? ? </ul>
? ? </li>
? ? <li>工具</li>
</ul>

<style type="text/css">
? ul li {
? ? list-style: none;
? }

? li ul {
? ? display: none;
? }

? .plus {
? ? list-style-image: url(img/plus.gif);
? }

? .minus {
? ? list-style-image: url(img/minus.gif);
? }
</style>

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
? <script type="text/javascript">
? ? $(function () {
? ? ? //給有ul的li加下圖標（添加類名）
? ? ? $("li:has(ul)")
? ? ? ? .addClass("plus")
? ? ? ? //添加點擊事件
? ? ? ? .click(function (e) {
? ? ? ? ? //看看直接點的那個li（事件源）有沒有子元素
? ? ? ? ? if ($(e.target).children().length) {
? ? ? ? ? ? $(this).children().slideToggle();
? ? ? ? ? ? $(this).toggleClass("minus");
? ? ? ? ? }
? ? ? ? ? e.stopPropagation(); //阻止事件冒泡，目的只讓當前這一層產生動畫
? ? ? ? });
? ? });
</script>