再好好看下视频,对照下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>
<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>