課程
/前端開發
/HTML/CSS
/JS實現京東無延遲菜單效果
2019-09-09
源自：JS實現京東無延遲菜單效果 3-1
正在回答
再好好看下視頻，對照下js源碼
給你看下我寫的html結構
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<link?rel="stylesheet"?href="./index.css">
????<script?src="./index.js"></script>
</head>
<body>
????<div?class="wrapper">
????????<ul>
????????????<li?data-id="a">
????????????????<span>家用電器</span>
????????????</li>
????????????<li?data-id="b">
????????????????<span>手機?/?運營商?/?數碼</span>
????????????<li?data-id="c">
????????????????<span>電腦?/?辦公</span>
????????????<li?data-id="d">
????????????????<span>家居?/?家具?/?家裝?/?廚具</span>
????????????<li?data-id="e">
????????????????<span>男裝?/?女裝?/?童裝?/?內衣</span>
????????????<li?data-id="f">
????????????????<span>美妝?/?個人護潔?/?寵物</span>
????????????<li?data-id="g">
????????????????<span>女鞋?/?箱包?/?鐘表?/?珠寶</span>
????????????<li?data-id="h">
????????????????<span>男鞋?/?運動?/?戶外</span>
????????????<li?data-id="i">
????????????????<span>房產?/?汽車?/?汽車用品</span>
????????????<li?data-id="j">
????????????????<span>母嬰?/?玩具樂器</span>
????????????<li?data-id="k">
????????????????<span>食品?/?酒類?/?生鮮?/?特產</span>
????????????<li?data-id="l">
????????????????<span>藝術?/?禮品鮮花?/?農資綠植</span>
????????</ul>
????????<div?id="sub"?class="none">
????????????<div?id="a"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="b"?class="sub_content?none">
????????????<div?id="c"?class="sub_content?none">
????????????<div?id="d"?class="sub_content?none">
????????????<div?id="e"?class="sub_content?none">
????????????<div?id="f"?class="sub_content?none">
????????????<div?id="g"?class="sub_content?none">
????????????<div?id="h"?class="sub_content?none">
????????????<div?id="i"?class="sub_content?none">
????????????<div?id="j"?class="sub_content?none">
????????????<div?id="k"?class="sub_content?none">
????????????<div?id="l"?class="sub_content?none">
????????</div>
????</div>
</body>
</html>
舉報
JS模擬京東商城無延遲菜單效果，學習菜單結構和樣式處理
1 回答bug:二級菜單為空白
1 回答怎么寫二級菜單
3 回答添加js腳本后，二級菜單只顯示一行空白？
1 回答二級菜單消失
3 回答不能從一級菜單平移到二級菜單
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2019-09-28
再好好看下視頻，對照下js源碼
2019-09-28
給你看下我寫的html結構
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<link?rel="stylesheet"?href="./index.css">
????<script?src="./index.js"></script>
</head>
<body>
????<div?class="wrapper">
????????<ul>
????????????<li?data-id="a">
????????????????<span>家用電器</span>
????????????</li>
????????????<li?data-id="b">
????????????????<span>手機?/?運營商?/?數碼</span>
????????????</li>
????????????<li?data-id="c">
????????????????<span>電腦?/?辦公</span>
????????????</li>
????????????<li?data-id="d">
????????????????<span>家居?/?家具?/?家裝?/?廚具</span>
????????????</li>
????????????<li?data-id="e">
????????????????<span>男裝?/?女裝?/?童裝?/?內衣</span>
????????????</li>
????????????<li?data-id="f">
????????????????<span>美妝?/?個人護潔?/?寵物</span>
????????????</li>
????????????<li?data-id="g">
????????????????<span>女鞋?/?箱包?/?鐘表?/?珠寶</span>
????????????</li>
????????????<li?data-id="h">
????????????????<span>男鞋?/?運動?/?戶外</span>
????????????</li>
????????????<li?data-id="i">
????????????????<span>房產?/?汽車?/?汽車用品</span>
????????????</li>
????????????<li?data-id="j">
????????????????<span>母嬰?/?玩具樂器</span>
????????????</li>
????????????<li?data-id="k">
????????????????<span>食品?/?酒類?/?生鮮?/?特產</span>
????????????</li>
????????????<li?data-id="l">
????????????????<span>藝術?/?禮品鮮花?/?農資綠植</span>
????????????</li>
????????</ul>
????????<div?id="sub"?class="none">
????????????<div?id="a"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="b"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="c"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="d"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="e"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="f"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="g"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="h"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="i"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="j"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="k"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????????<div?id="l"?class="sub_content?none">
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????????<dl>
????????????????????<dt><a?href="javascript:;">電視<i>></i></a></dt>
????????????????????<dd><a?href="javascript:;">超薄電視</a></dd>
????????????????????<dd><a?href="javascript:;">全屏電視</a></dd>
????????????????????<dd><a?href="javascript:;">智能電視</a></dd>
????????????????</dl>
????????????</div>
????????</div>
????</div>
</body>
</html>