<ul>
? ? <li>
? ? ? 主題市場(chǎng)
? ? ? <ul>
? ? ? ? <li>
? ? ? ? ? 運(yùn)動(dòng)派
? ? ? ? ? <ul>
? ? ? ? ? ? <li>三級(jí)菜單a</li>
? ? ? ? ? ? <li>三級(jí)菜單b</li>
? ? ? ? ? ? <li>三級(jí)菜單c</li>
? ? ? ? ? ? <li>三級(jí)菜單d</li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? 有車族
? ? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? 三級(jí)
? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>四級(jí)</li>
? ? ? ? ? ? ? ? <li>四級(jí)</li>
? ? ? ? ? ? ? ? <li>四級(jí)</li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>三級(jí)</li>
? ? ? ? ? ? <li>三級(jí)</li>
? ? ? ? ? ? <li>三級(jí)</li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>生活家</li>
? ? ? </ul>
? ? </li>
? ? <li>
? ? ? 特色購(gòu)物
? ? ? <ul>
? ? ? ? <li>淘寶二手</li>
? ? ? ? <li>拍賣會(huì)</li>
? ? ? ? <li>愛(ài)逛街</li>
? ? ? ? <li>全球購(gòu)</li>
? ? ? ? <li>淘女郎</li>
? ? ? </ul>
? ? </li>
? ? <li>
? ? ? 優(yōu)惠促銷
? ? ? <ul>
? ? ? ? <li>天天特價(jià)</li>
? ? ? ? <li>免費(fèi)試用</li>
? ? ? ? <li>清倉(cāng)</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加下圖標(biāo)（添加類名）
? ? ? $("li:has(ul)")
? ? ? ? .addClass("plus")
? ? ? ? //添加點(diǎn)擊事件
? ? ? ? .click(function (e) {
? ? ? ? ? //看看直接點(diǎn)的那個(gè)li（事件源）有沒(méi)有子元素
? ? ? ? ? if ($(e.target).children().length) {
? ? ? ? ? ? $(this).children().slideToggle();
? ? ? ? ? ? $(this).toggleClass("minus");
? ? ? ? ? }
? ? ? ? ? e.stopPropagation(); //阻止事件冒泡，目的只讓當(dāng)前這一層產(chǎn)生動(dòng)畫(huà)
? ? ? ? });
? ? });
</script>