本文介绍了一位实习生如何通过修改网上找到的示例，使用jQuery实现京东商城左侧商品分类的导航栏。内容包括遇到的问题、解决办法以及分享的资源链接，适用于前端开发者学习和参考。
本来是想做后台的，来公司实习才发现前台都必须会，但要有精的。前不久让我改前台左则商品分栏 ，大部分东西都是从别的商城那抄来的,(css js就连image也有。。。)然后要我改分栏显示。我jQuery都没怎么学反正几乎全都是只会皮毛，便从网上搜到一个例子，但用上去发现有点小问题 便拿过来改了一下，希望对大家有用，如果有实现了一号店或是淘宝商品分栏的希望和大家来分享一下！
原例 http://down.admin5.com/demo/code_pop/18/876/
当分类商品列表过长时最后几个分类无法在浏览器中显示
html文件
<!DOCTYPE html>
<!-- saved from url=(0044)http://down.admin5.com/demo/code_pop/18/876/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>京东新版侧栏jquery导航</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="top"></div>
<!--导航 Start-->
<div class="menu">
<div class="all-sort"><h2><a href="">全部商品分类</a></h2></div>
<div class="ad">
<a href="">
<img src="images/rBEhVlJEA84IAAAAAAAZY9Mm2-UAADmFQNaVy4AABl7123.jpg" width="141" height="40">
</a>
</div>
<div class="nav">
<ul class="clearfix">
<li><a href="http://sc.admin5.com/" class="current">首页</a></li>
<li><a href="http://sc.admin5.com/">服装城</a></li>
<li><a href="http://sc.admin5.com/">京东超市</a></li>
<li><a href="http://sc.admin5.com/">团购</a></li>
<li><a href="http://sc.admin5.com/">拍卖</a></li>
<li><a href="http://sc.admin5.com/">在线游戏</a></li>
</ul>
</div>
</div>
<!--导航 End-->
<!--所有分类 Start-->
<div class="wrap">
<div class="all-sort-list">
<div class="item bo">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix" style="top: 3px; display: none;">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="http://down.admin5.com/demo/code_pop/18/876/#">电子书0</a></dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">免费</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">小说</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">励志与成功</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">婚恋/两性</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">文学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">经管</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="http://down.admin5.com/demo/code_pop/18/876/#">数字音乐</a></dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">通俗流行</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">古典音乐</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">摇滚说唱</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">爵士蓝调</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">乡村民谣</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="http://down.admin5.com/demo/code_pop/18/876/#">音像</a></dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">音乐</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">影视</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">教育音像</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">小说</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">文学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">青春文学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">传记</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">历史</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">心理学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">政治/军事</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">国学/古籍</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">哲学/宗教</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">经济</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">金融与投资</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">管理</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">家庭与育儿</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">旅游/地图</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">烹饪/美食</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">时尚/美妆</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">家居</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">婚恋与两性</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">娱乐/休闲</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">健身与保健</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">动漫/幽默</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">科普</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">IT</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">建筑</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">医学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">工业技术</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">电子/通信</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">农林</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">少儿</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">0-2岁</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">3-6岁</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">7-10岁</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">11-14岁</a></em></dd>
</dl>
<dl class="fore10">
<dt>教育</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">教材教辅</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">考试</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">外语学习</a></em></dd>
</dl>
<dl class="fore11">
<dt>其它</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">英文原版书</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">港台图书</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">工具书</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">套装书</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">杂志/期刊</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank"><img src="./京东新版侧栏jquery导航_files/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank"><img src="./京东新版侧栏jquery导航_files/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">中华书局</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">人民邮电出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">电子工业出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">三联书店</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">浙江少年儿童出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">人民文学出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">外语教学与研究出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">中信出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">化学工业出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">北京大学出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix" style="top: 3px; display: none;">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="http://down.admin5.com/demo/code_pop/18/876/#">电子书1</a></dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">免费</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">小说</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">励志与成功</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">婚恋/两性</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">文学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">经管</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="http://down.admin5.com/demo/code_pop/18/876/#">数字音乐</a></dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">通俗流行</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">古典音乐</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">摇滚说唱</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">爵士蓝调</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">乡村民谣</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="http://down.admin5.com/demo/code_pop/18/876/#">音像</a></dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">音乐</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">影视</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">教育音像</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">小说</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">文学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">青春文学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">传记</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">历史</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">心理学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">政治/军事</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">国学/古籍</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">哲学/宗教</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">经济</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">金融与投资</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">管理</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">家庭与育儿</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">旅游/地图</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">烹饪/美食</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">时尚/美妆</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">家居</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">婚恋与两性</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">娱乐/休闲</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">健身与保健</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">动漫/幽默</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">科普</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">IT</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">建筑</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">医学</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">工业技术</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">电子/通信</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">农林</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">少儿</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">0-2岁</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">3-6岁</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">7-10岁</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">11-14岁</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank"><img src="./京东新版侧栏jquery导航_files/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank"><img src="./京东新版侧栏jquery导航_files/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">中华书局</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">人民邮电出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">电子工业出版社</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">三联书店</a></li>
<li><a href="http://down.admin5.com/demo/code_pop/18/876/#" target="_blank">浙江少年儿童出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix" style="top: 65px; display: none;">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="http://down.admin5.com/demo/code_pop/18/876/#">电子书2</a></dt>
<dd><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">免费</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">小说</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">励志与成功</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">婚恋/两性</a></em><em><a href="http://down.admin5.com/demo/code_pop/18/876/#">文学</a></em><em><a href="
最低0.47元/天 解锁文章
扫一扫
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
