第一行菜单的显示隐藏效果，为什么我的只对第一个有效果呢？

第一行菜单的显示隐藏效果，为什么我的只对第一个有效果呢？

http://img1.sycdn.imooc.com//climg/5c6aa82f0001770013250168.jpg

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery作业</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div>
<div class="head" id="top">
<div class="head-top">
<div class="text wrap">
<span class="red"><a href="#">&nbsp;&nbsp;亲，请登录&nbsp;</a></span>
<span><a href="#">免费注册&nbsp;</a></span>
<span><a href="#">手机逛慕淘</a></span>
<ul>
<li >
<a href="#" class="js-see">我的慕淘&nbsp;<img src="img/icon/21.png"></a>
<div class="js-hide hide">
<p><a href="#">已卖到的宝贝</a></p>
<p><a href="#">我的足迹</a></p>
</div>
</li>
<li>
<a href="#" class="js-see">收藏夹&nbsp;<img src="img/icon/21.png"></a>
<div class="js-hide hide">
<p><a href="#">收藏的宝贝</a></p>
<p><a href="#">收藏的店铺</a></p>
</div>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li>
<a href="#" class="js-see">卖家中心&nbsp;<img src="img/icon/21.png"></a>
<div class="js-hide hide">
<p><a href="#">免费开店</a></p>
<p><a href="#">已卖出的宝贝</a></p>
<p><a href="#">出售中的的宝贝</a></p>
<p><a href="#">卖家服务市场</a></p>
<p><a href="#">卖家培训中心</a></p>
<p><a href="#">体验中心</a></p>
</div>
</li>
<li>
<a href="#" class="js-see">联系客服&nbsp;<img src="img/icon/21.png"></a>
<div class="js-hide hide">
<p><a href="#">消费者客服</a></p>
<p><a href="#">卖家客服</a></p>
</div>
</li>
</ul>
</div>
<div class="logo wrap">
<div class="logo-img"><a href="#"><img src="img/logo.png"></a></div>
<div class="search">
<input type="text" id="search" placeholder="灵魂美食一元抢">
<input type="button" id="button" value="搜索">
</div>
<div class="shop">
<div class="shop-see">
<a href="#">
<img src="img/icon/26.png">
<span>&nbsp;&nbsp;购物车&nbsp;&nbsp;|&nbsp;&nbsp;0&nbsp;&nbsp;</span>
<img src="img/icon/22.png">
</a>
</div>
<div class="shop-hide hide">
<div class="join">
<span>最近新加入的商品</span>
</div>
<div class="scroll">
<div class="shop-items item1">
<div class="left">
<p><a href="#">adidas 阿迪达斯 训练 男子</a></p>
<p>￥355 x 1</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item2">
<div class="left">
<p><a href="#">玉兰油多效修护三部曲套装</a></p>
<p>￥199 x 2</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item3">
<div class="left">
<p><a href="#">apple iphone7 （A1660）</a></p>
<p>￥6180 x 1</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item4">
<div class="left">
<p><a href="#">飞利浦面条机</a></p>
<p>￥654 x 4</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item5">
<div class="left">
<p><a href="#">罗技 力反馈游戏方向</a></p>
<p>￥2999 x 1</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item6">
<div class="left">
<p><a href="#">adidas 阿迪达斯 训练 男子</a></p>
<p>￥355 x 1</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item7">
<div class="left">
<p><a href="#">玉兰油多效修护三部曲套装</a></p>
<p>￥199 x 2</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item8">
<div class="left">
<p><a href="#">apple iphone7 （A1660）</a></p>
<p>￥6180 x 1</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item9">
<div class="left">
<p><a href="#">飞利浦面条机</a></p>
<p>￥654 x 4</p>
</div>
<div class="right">x</div>
</div>
<div class="shop-items item10">
<div class="left">
<p><a href="#">罗技 力反馈游戏方向</a></p>
<p>￥2999 x 1</p>
</div>
<div class="right">x</div>
</div>
</div>
<div class="sum">
<span class="left">共27件商品 共计 ￥0.00</span>
<span class="button"><a href="#">去购物车</a></span>
</div>
</div>
</div>
</div>
</div>
<div class="nav">
<div class="nav-i wrap">
<div class="nav-left">
<div class="left-img">
<img src="img/icon/18.png">
</div>
<div class="left-text">
<span>&nbsp;&nbsp;商品分类</span>
</div>
</div>
<div class="nav-right">
<a href="#">数码城</a>
<a href="#">天黑黑</a>
<a href="#">团购</a>
<a href="#">发现</a>
<a href="#">二手特价</a>
<a href="#">名品汇</a>
</div>
</div>
</div>
<div class="floor">
<div class="hide">
<p>会员</p>
<p>购物车</p>
<p>我的关注</p>
<p>我的消息</p>
<p>顶部</p>
</div>
<div class="link">
<p><a href="#"><img src="img/icon/13.png"></a></p>
<p><a href="#"><img src="img/icon/14.png"></a></p>
<p><a href="#"><img src="img/icon/15.png"></a></p>
<p><a href="#"><img src="img/icon/16.png"></a></p>
<p><a href="#top"><img src="img/icon/17.png"></a></p>
</div>
</div>
</div>

<div class="main">
<div class="main-top wrap">
<div class="top-left">
<div class="list">
<a href="#">
<span class="list-l">家用电器</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">手机、运营商、数码</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">电脑、办公</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">家居、家具、家装、厨具</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">男装、女装、童装、内衣</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">化妆、清洁、宠物</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">运动户外、钟表</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">汽车、汽车用品</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">母婴、玩具乐器</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">食品、酒类、生鲜、特产</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">医药保健</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">图书、音像、电子书</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">彩票、旅行、充值、票务</span>
<span class="list-r">></span>
</a>
</div>
<div class="list">
<a href="#">
<span class="list-l">理财、众筹、白条、保险</span>
<span class="list-r">></span>
</a>
</div>
</div>
<!-- 隐藏菜单 -->

<div class="top-right">
<div class="banner" id="banner">
<!-- 图片 -->
<a href="#">
<div class="pics-img img1 img-active"></div>
</a>
<a href="#">
<div class="pics-img img2"></div>
</a>
<a href="#">
<div class="pics-img img3"></div>
</a>
<a href="#">
<div class="pics-img img4"></div>
</a>
<a href="#">
<div class="pics-img img5"></div>
</a>
<!-- 箭头 -->
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<!-- 圆点 -->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="news">
<table>
<tr>
<td colspan="4" class="td-1">
<h3>慕快报</h3>
<span class="td1-r"><a href="#">更多></a></span>
<div class="clear"></div>
<ul>
<li><a href="#"><span class="li-b">[特惠]</span><span>&nbsp;精选图书每满150-50</span></a></li>
<li><a href="#"><span class="li-b">[公告]</span><span>&nbsp;因广州图书仓搬仓升级配送延迟</span></a></li>
<li><a href="#"><span class="li-b">[特惠]</span><span>&nbsp;爆款手机12期免息 抽奖赢电视</span></a></li>
<li><a href="#"><span class="li-b">[公告]</span><span>&nbsp;广东、福建受台风影响配送延迟</span></a></li>
<li><a href="#"><span class="li-b">[特惠]</span><span>&nbsp;大闸蟹领券满399-180</span></a></li>
</ul>
</td>
</tr>
<tr class="tr-center">
<td>
<a href="#">
<dl>
<dt><img src="img/icon/1.png"></dt>
<dd>话费</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/2.png"></dt>
<dd>机票</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/3.png"></dt>
<dd>电影票</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/4.png"></dt>
<dd>游戏</dd>
</dl>
</a>
</td>
</tr>
<tr class="tr-center">
<td>
<a href="#">
<dl>
<dt><img src="img/icon/5.png"></dt>
<dd>彩票</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/6.png"></dt>
<dd>加油卡</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/7.png"></dt>
<dd>酒店</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/8.png"></dt>
<dd>火车票</dd>
</dl>
</a>
</td>
</tr>
<tr class="tr-center">
<td>
<a href="#">
<dl>
<dt><img src="img/icon/9.png"></dt>
<dd>众筹</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/10.png"></dt>
<dd>理财</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/11.png"></dt>
<dd>礼品卡</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/icon/12.png"></dt>
<dd>白条</dd>
</dl>
</a>
</td>
</tr>
</table>
<a href="#"><img src="img/ad.png"></a>

<div class="news-middle"></div>
<div class="news-bottom"></div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="content wrap">
<div class="sub clothes">
<div class="text">
<div class="left">
<span class="circle">1F</span>
<h2>服装鞋包</h2>
</div>
<div class="right">
<span class="right-1"><a href="javascript:void(0)">大牌</a>&nbsp;&nbsp;&nbsp;|</span>
<span class="right-2">&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)">男装</a>&nbsp;&nbsp;&nbsp;|</span>
<span class="right-3">&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)">女装</a></span>
</div>
</div>
<div class="clothes-main">
<div class="sub-li big sub-active">
<table>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/2.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥888</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/2.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥888</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥666</p>
</dd>
</dl>
</a>
</td>

</tr>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/5.jpg"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/4.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥789</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/6.jpg"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>

</tr>
</table>
</div>
<div class="sub-li man">
<table>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/5.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
</tr>
</table>
</div>
<div class="sub-li woman">
<table>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/5.jpg"></dt>
<dd>
<p>匡威男棒球开衫外套2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>汉服女飘带古风长裙2018</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sub people">
<div class="text">
<div class="left">
<span class="circle">2F</span>
<h2>个护美妆</h2>
</div>
<div class="right">
<span class="right-1"><a href="javascript:void(0)">热门</a>&nbsp;&nbsp;&nbsp;|</span>
<span class="right-2">&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)">国际大牌</a>&nbsp;&nbsp;&nbsp;|</span>
<span class="right-3">&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)">国际名品</a></span>
</div>
</div>
<div class="people-main">
<div class="sub-li hot sub-active">
<table>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/2.jpg"></dt>
<dd>
<p>百雀羚水嫩倍现盈透精华水</p>
<p class="red">￥888</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/2.jpg"></dt>
<dd>
<p>百雀羚水嫩倍现盈透精华水</p>
<p class="red">￥888</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>百雀羚水嫩倍现盈透精华水</p>
<p class="red">￥666</p>
</dd>
</dl>
</a>
</td>

</tr>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/5.jpg"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/4.jpg"></dt>
<dd>
<p>百雀羚水嫩倍现盈透精华水</p>
<p class="red">￥789</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/6.jpg"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.jpg"></dt>
<dd>
<p>百雀羚水嫩倍现盈透精华水</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/1.png"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>百雀羚水嫩倍现盈透精华水</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>

</tr>
</table>
</div>
<div class="sub-li internation">
<table>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/5.jpg"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
</tr>
</table>
</div>
<div class="sub-li famous">
<table>
<tr>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/5.jpg"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
<td>
<a href="#">
<dl>
<dt><img src="img/floor/3.jpg"></dt>
<dd>
<p>玉兰油多效修护三部曲套装</p>
<p class="red">￥419</p>
</dd>
</dl>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bottom ">
<div class="friend wrap">
<div class="friend-li">
<h3>消费者保障</h3>
<p><a href="#">保障范围</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">退货退款流程</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">服务中心</a></p>
<p><a href="#">更多特色服务</a></p>
</div>
<div class="friend-li">
<h3>新手上路</h3>
<p><a href="#">新手专区</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">消费警示</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">交易安全</a></p>
<p><a href="#">24小时在线帮助</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">免费开店</a></p>
</div>
<div class="friend-li">
<h3>付款方式</h3>
<p><a href="#">快捷支付</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">信用卡</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">余额包</a></p>
<p><a href="#">货到付款</a></p>
</div>
<div class="friend-li">
<h3>慕淘特色</h3>
<p><a href="#">手机慕淘</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">慕淘信</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">大众评审</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">B格指南</a></p>
</div>
</div>
<div class="footer">
<div class="text">
<p>
<a href="#">关于慕淘</a>
<a href="#">合作伙伴</a>
<a href="#">营销中心</a>
<a href="#">廉正举报</a>
<a href="#">联系客服</a>
<a href="#">开放平台</a>
<a href="#">诚征英才</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a>
<a href="#">法律声明</a>
<a href="#">知识产权</a>
</p>
<p>&copy; 2016 imooc.com All Rights Reserved</p>
</div>
</div>
</div>

</div>
</div>

</body>
</html>

script部分


$(document).ready(function(){
	var index=0,
		timer=null,
		pics=$(".pics-img"),
		lens=pics.length,
		span=$("#dots span"),
		list=$(".top-left .list"),
		item=$(".menu .menu-item"),
		listA=list.find("a"),
		jsSee=$(".js-see"),
		jsHide=$(".js-hide"),
		textLi=$(".text li"),
		shopSee=$(".shop-see"),
		shopHide=$(".shop-hide");
		console.log(textLi);
	// 清除定时器
	function stopAuto(){
		clearInterval(timer);
	}
	// 图片自动轮播
	function startAuto(){
		timer=setInterval(function(){
			index++;
			if(index>=lens){
				index=0;
			}
			changeImg();
		},3000)
	}

	// 图片变换函数
	function changeImg(){		
		pics.eq(index).addClass("img-active").parent().siblings().children().removeClass("img-active");
		span.eq(index).addClass("active").siblings().removeClass("active");

	}

	// 整体函数
	function slideImg(){
		$("#banner").mouseenter(function(){
			stopAuto();
		})
		$("#banner").mouseleave(function(){
			startAuto();
		})
		$("#banner").mouseleave();

		for(var i=0;i<lens;i++){
			span.click(function(){
			index=span.index($(this));
			changeImg();
		})
		}		

		// 下一张
		$("#next").click(function(){
			index++;
			if(index>=lens) index=0;
			changeImg();
		})

    	// 上一张
	    $("#prev").click(function(){
				index--;
				if(index<0) index=lens-1;
				changeImg();
			})
		// 隐藏菜单
		list.mouseenter(function(){
			item.eq($(this).index()).css({"display":"block"});
			$(this).css({"background-color":"#fff"});
			listA.eq($(this).index()).css({"color":"red"});
		})
		item.mouseenter(function(){
			$(this).css({"display":"block"})

		})
		list.mouseleave(function(){
			item.css({"display":"none"});
			$(this).css({"background-color":"red"});
			listA.eq($(this).index()).css({"color":"#fff"});

		})
		item.mouseleave(function(){
			$(this).css({"display":"none"})

		})



		// 第一行菜单栏悬浮效果
		jsSee.mouseenter(function(){
			jsHide.eq($(this).index()).removeClass("hide");
			textLi($(this).index()).addClass("see");
		})
		jsSee.mouseleave(function(){
			jsHide.addClass("hide");

		})

		// 购物车悬浮效果
		shopSee.mouseenter(function(){
			shopHide.eq($(this).index()).removeClass("hide");
		})
		shopHide.mouseenter(function(){
			$(this).removeClass("hide");

		})
		shopSee.mouseleave(function(){
			shopHide.addClass("hide");

		})
		shopHide.mouseleave(function(){
			$(this).addClass("hide");

		})

	}

	slideImg();

})




base部分

/*all tag*/
*{
	font-size: 13px;
}

.red a{
	color: red;
}

.head .head-top,
.bottom .footer{
	background: #f3f5f7;
}

.hide{
	display: none;
}

.see{
	background: #fff;
	box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2);
	border-radius: 3px;
	position: relative;
	z-index: 99;
}

/*head*/

.head .head-top .text {	
	font-size: 14px;
	background: none;
}
.head .head-top .text ul{
	float: right;
}
.head .head-top .text ul li{
	float: left;
	margin: 0 15px;
}
.head .head-top .text ul li img{
	position: relative;
	top: 3px;
}
.head .head-top .text ul li div{
	line-height: 28px;
}

.head .head-top .text ul li div p:hover{
	background: #cdd0d4;
}
.head .head-top .logo{
	background: none;
	position: relative;
}
.head .head-top .logo .logo-img{
	float: left;
	position: absolute;
	top: 50%;
	left: 15px;
	margin-top: -24px;
}
.head .head-top .logo .search{
	width: 690px;
	height: 40px;
	float: left;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -345px;
}
.head .head-top .logo #search{
	width: 610px;
	height: 40px;
	float: left;
}
.head .head-top .logo #button{
	width: 80px;
	height: 40px;
	float: left;
	background: #07111b;
	color: #fff;
}
.head .head-top .logo .shop {
	width: 160px;
	height: 40px;
	float: right;	
	background: #f01414;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -20px;
	margin-right: 50px;
	
}
.head .head-top .logo .shop .shop-see a{
	margin-left: 15px;
	color: #fff;
	line-height: 40px;
}
.head .head-top .logo .shop .shop-see a img{
	position: relative;
	top: 3px;
}
.head .head-top .logo .shop .shop-hide{
	width: 280px;
	height: 400px;
	background: #fff;
	border:1px solid #f3f5f7;
	position: relative;
	z-index: 199;
}

.head .head-top .logo .shop .shop-hide .join{
	height: 55px;
	line-height: 55px;
	margin-left: 25px;
}
.head .head-top .logo .shop .shop-hide .scroll{
	height:275px;
	overflow-y: scroll;
	overflow-x: hidden;
}
.head .head-top .logo .shop .shop-hide .scroll .shop-items{	
	background: left center no-repeat;
	background-size: 40px 40px;
	width: 240px;
	height: 54px;
	border-top: 1px solid #ccc;
	margin-left: 10px;
	margin-right: 30px;
}
.head .head-top .logo .shop .shop-hide .scroll .shop-items a{
	color: #4d555d;
}
.head .head-top .logo .shop .shop-hide .scroll .shop-items a:hover{
	color: red;
}
.head .head-top .logo .shop .shop-hide .scroll .shop-items .left,
.head .head-top .logo .shop .shop-hide .scroll .shop-items .right{
	line-height: 22px;
	margin-top: 5px;
}
.head .head-top .logo .shop .shop-hide .scroll .shop-items .left{
	float: left;
	margin-left: 50px;	
}
.head .head-top .logo .shop .shop-hide .scroll .shop-items .right{
	float: right;
	margin-right: 10px;
}
.head .head-top .logo .shop .shop-hide .scroll .item1,
.head .head-top .logo .shop .shop-hide .scroll .item6{
	background-image: url(../img/cart/1.png);
}
.head .head-top .logo .shop .shop-hide .scroll .item2,
.head .head-top .logo .shop .shop-hide .scroll .item7{
	background-image: url(../img/cart/2.png);
}
.head .head-top .logo .shop .shop-hide .scroll .item3,
.head .head-top .logo .shop .shop-hide .scroll .item8{
	background-image: url(../img/cart/3.png);
}
.head .head-top .logo .shop .shop-hide .scroll .item4,
.head .head-top .logo .shop .shop-hide .scroll .item9{
	background-image: url(../img/cart/4.png);
}
.head .head-top .logo .shop .shop-hide .scroll .item5,
.head .head-top .logo .shop .shop-hide .scroll .item10{
	background-image: url(../img/cart/5.png);
}
.head .head-top .logo .shop .shop-hide .sum{
	height: 70px;
	line-height: 70px;
	margin-left: 25px;
	position: relative;
}
.head .head-top .logo .shop .shop-hide .sum .left{
	float: left;
}
.head .head-top .logo .shop .shop-hide .sum .button{
	width: 70px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	background: red;
	float: right;
	position: absolute;
	top: 50%;
	right: 25px;
	margin-top: -20px;


}
.head .head-top .logo .shop .shop-hide .sum .button a{
	color: #fff;
	font-size: 15px;
}
.head .nav{
	background: #07111b;
}

.head .nav .nav-left .left-img{
	padding-left: 15px;
	float: left;
	line-height: 55px;
}

.head .nav .nav-left .left-text{
	color: #fff;
	line-height: 50px;
	float: left;
}
.head .nav .nav-right{
	background: none;
	color: #fff;
	line-height: 45px;
	
}
.head .nav .nav-right a{
	color: #fff;
	margin: 0 40px 0 0px;
}

.head .nav .nav-right a:hover{
	color: red;
}

.head .floor{}
.head .floor .hide{
	float: left;
	color: #fff;
	line-height: 40px;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	display: none;
}
.head .floor .link{
	float: right;
}
.head .floor .link p{
	width: 40px;
	height: 39px;
	border-bottom: 1px solid #fff;
	position: relative;
}
.head .floor .link p img{
	width: 24px;
	height: 24px;
	line-height: 39px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -12px;
	margin-left: -12px;
}

/*main*/

.main .main-top{
	position: relative;
}
.main .main-top .top-left .list {
	line-height: 36.57px;
	padding-left: 10px;
	padding-right: 10px;
}

.main .main-top .top-left .list a{
	color: #fff;	
}
.main .main-top .top-left .list .list-r{
	float: right;
}
/*隐藏菜单*/
.main .main-top .menu .menu-item{
	width: 744px;
	height: 570px;
	background: #fff;
	position: absolute;
	top: 0;
	left: 210px;
	z-index: 999;
	box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2);
	border-radius: 3px;
	display: none;	
}


.main .main-top .menu .menu-item table{
	margin-right: 60px;
}
.main .main-top .menu .menu-item th{
	height:68px;
}
.main .main-top .menu .menu-item .th-left{
	text-align: right;
	width: 65px;
}
.main .main-top .menu .menu-item .th-middle,
.main .main-top .menu .menu-item .th-right{	
	font-weight: normal;
	color: #4d555d;
}
.main .main-top .menu .menu-item .th-middle{
	padding-right: 10px;
	padding-left: 10px;
}
.main .main-top .menu .menu-item .th-right{
	text-align: left;	
}
.main .main-top .menu .menu-item .th-right a{
	margin-right: 15px;
}
.main .main-top .menu .menu-item .th-right a:hover{
	color: red;
}
/*轮播图区域*/
.main .main-top .top-right .banner{
	width: 728px;
	height: 504px;
	background: none;
	position: relative;
}
.main .main-top .top-right .banner .pics-img{
	width: 100%;
	height: 100%;
	display: none;
	background-size: 100% 100%;
}
.main .main-top .top-right .banner .img-active{
	display: block;
}
.main .main-top .top-right .banner .img1{
	background-image: url(../img/focus-carousel/1.jpg);
	position: absolute;
}
.main .main-top .top-right .banner .img2{
	background-image: url(../img/focus-carousel/2.jpg);
	position: absolute;
}
.main .main-top .top-right .banner .img3{
	background-image: url(../img/focus-carousel/3.jpg);
	position: absolute;
}
.main .main-top .top-right .banner .img4{
	background-image: url(../img/focus-carousel/4.jpg);
	position: absolute;
}
.main .main-top .top-right .banner .img5{
	background-image: url(../img/focus-carousel/5.jpg);
	position: absolute;
}
/*箭头区*/
.main .main-top .top-right .banner .button{
	width: 40px;
	height: 80px;
	background: url(../img/focus-carousel/pre2.png) center center no-repeat;
	position: absolute;
	top: 50%;
	left: 0px;
	margin-top: -40px;
	z-index: 9;
}
.main .main-top .top-right .banner .button:hover{
	background-color: #333;
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.main .main-top .top-right .banner .next{
	background-image: url(../img/focus-carousel/pre.png);
	left: auto;
	right: 0px;
}

/*圆点*/
.main .main-top .top-right .banner .dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	margin-left: -46px;
	text-align: right;
	padding-right: 24px;
	line-height: 12px;
}

.main .main-top .top-right .banner .dots span {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-left: 8px;
	background-color: rgba(7, 17, 27, 0.4);
	cursor: pointer;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

.main .main-top .top-right .banner .dots span.active{
	box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
	background-color: #ffffff;
}

.main .main-top .top-right .news{
	background: none;
}
.main .main-top .top-right .news table{
	width: 246px;
	height: 414px;	
	font-size: 13px;
	border-collapse: collapse;
}

.main .main-top .top-right .news table td{
	border: 1px solid #d9dde1;	
}
.main .main-top .top-right .news table .td-1{
	height: 200px;
	padding: 10px;
	line-height: 30px;
	color: #4d555d;
}
.main .main-top .top-right .news table .td-1 a:hover{
	color: red;
}
.main .main-top .top-right .news table .td-1 h3{
	float: left;
	font-size: 16px;
	color: red;
}
.main .main-top .top-right .news table .td-1 .td1-r a{
	float: right;
	color: #93999f;
}
.main .main-top .top-right .news table .td-1 .li-b{
	font-weight: bold;
}
.main .main-top .top-right .news table .tr-center{
	text-align: center;
}
.main .main-top .top-right .news table .tr-center img{
	width: 25px;
	height: 25px;
}
.main .main-top .top-right .news table dd{
	color: #8a8e93;
}
/*.main .content*/

.main .content .sub{
	background: none;	
}
.main .content .sub .clothes-main,
.main .content .sub .people-main{
	width: 100%;
	position: relative;
}
/*.main .content .sub .clothes-main .big{
	height: 500px;
}
.main .content .sub .clothes-main .man{
	height: 500px;
}
.main .content .sub .clothes-main .woman{
	height: 500px;
}*/
.main .content .sub .text{
	height: 45px;
	border-bottom: 1px solid #f00;
}

.main .content .sub .text .left{
	float: left;
	margin-left: 15px;
}
.main .content .sub .text .left .circle{
	color: #fff;
	width: 22px;
	height: 22px;
	text-align: center;
	line-height: 28px;
	background: #07111b;
	border-radius: 50%;
	padding: 3px;
}
.main .content .sub .text .left h2{
	float: right;
	margin-left: 20px;
	font-size: 22px;
}
.main .content .sub .text .right{
	color: #93999f;
	float: right;
	margin-right: 15px;
}
.main .content .sub .text .right a{
	color: #93999f;
}
.main .content .sub .sub-li{
	display: none;
}

.main .content .sub .sub-active{
	display: block;
}
.main .content .sub .big,
.main .content .sub .man,
.main .content .sub .woman,
.main .content .sub .hot,
.main .content .sub .internation,
.main .content .sub .famous{
	position: absolute;
}
.main .content .sub .sub-li table{
	border-collapse: collapse;
}
.main .content .sub .sub-li td{
	width: 200px;
	height: 220px;
	text-align: center;
	vertical-align: middle;
}
.main .content .sub .sub-li td:hover{
	box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2);
	border-radius: 3px;
}
.main .content .sub .sub-li td dd{
	margin-top: 15px;
	line-height: 25px;
}
.main .content .sub .sub-li td dd p{
	color: #000;
}
.main .content .sub .sub-li td dd .red{
	color: red;
}


/*bottom*/
.bottom .friend{
	background: none;
	border-top: 1px solid #d9dde1;
	line-height: 30px;
	font-size: 13px;
	color: #93999f;
}
.bottom .friend h3{
	font-size: 16px;
	color: #000;
}
.bottom .friend .friend-li{
	float: left;
	margin: 20px 40px;
}

.bottom .friend .friend-li a:hover{
	color: red;
}

.bottom .footer{
	text-align: center;
	color: #787d82;
	font-size: 13px;
	line-height: 25px;
	display: table;
}
.bottom .footer .text{
	display: table-cell;
	vertical-align: middle;
}
.bottom .footer .text a{
	color: #787d82;
	margin-left: 15px;
}
.bottom .footer  .text a:hover{
	color: #000;
}



layout部分

/*all tags*/
*{
	margin: 0;
	padding: 0;
	border: none;
}
a{
	text-decoration: none;
	color: #4d555d;
}
ul{
	list-style: none;
}
img{
	border: none;
}
.clear{
	clear: both;
}

/*wrap*/
.wrap{
	width: 1200px;
	margin: 0 auto;
}

/*head*/
.head{
	width: 100%;
	height: auto;
	background: red;

}
.head-top{
	height: 170px;
	background: #666;	
}
.head .text{
	height: 45px;
	background: #ccc;
	line-height: 45px;
	border-bottom: solid 1px #cdd0d4;
}
.head .logo{
	height: 125px;
	background: #333;
}


.head .nav{
	width: 100%;
	height:45px;
	background: yellow;

}
.head .nav .nav-i{
	position: relative;
}

.head .nav-left{
	width: 210px;
	height: 50px;
	background: red;
	position: absolute;
	top: -5px;
	float: left;
	opacity: 0.9;
}
.head .nav-right{
	float: left;
	background: #999;
	position: absolute;
	left: 230px;
}

.head .floor{
	width: auto;
	height: 199px;
	background: #b7bbbf;
	position: fixed;
	top: 50%;
	right: 0;
	margin-top: -100px;
}

.main .top-left{
	width: 210px;
	height: 512px;
	background: red;
	float: left;
	opacity: 0.9;
}

.main .top-right{
	width: 990px;
	height: 512px;
	float: right;	
}

.main .main-top .banner{
	width: 728px;
	height: 504px;
	background: #aaa;
	margin: 8px 8px 0 8px;
	float: left;
	
}

.main .main-top .news{
	width: 246px;
	height: 504px;
	background: #ddd;
	margin-top: 8px;
	float: right;
	
}

/*content*/
.content .clothes,.content .people{
	height: 510px;
	margin: 35px 0 35px 0;
	background: #ddd;
}

/*bottom*/
.bottom .friend{
	height: 140px;
	background: #ddd;
}

.bottom .footer{
	width: 100%;
	height: 70px;
	background: #666;
}
走去偷柿子呀 2019-02-18
源自：项目：JQ实现瀑布流   5-2 作业题
0
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

3回答
Steve007 回答被采纳获得+3积分 2019-02-19 19:30:37

同学，你好。这是老师调试之后的代码，修改部分如下：

http://img1.sycdn.imooc.com//climg/5c6be7d9000173bb09250288.jpg

http://img1.sycdn.imooc.com//climg/5c6be7f00001dbbb05220162.jpg

http://img1.sycdn.imooc.com//climg/5c6be814000192d306570133.jpg

这是js代码，同学可以进行粘贴测试：

 $(document).ready(function(){

            var index=0,

            timer=null,

            pics=$(".pics-img"),

            lens=pics.length,

            span=$("#dots span"),

            list=$(".top-left .list"),

            item=$(".menu .menu-item"),

            listA=list.find("a"),

            jsSee=$(".js-see"),

            jsHide=$(".js-hide"),

            textLi=$(".text li"),

            shopSee=$(".shop-see"),

            shopHide=$(".shop-hide");

            console.log(textLi);

    // 清除定时器

    function stopAuto(){

        clearInterval(timer);

    }

    // 图片自动轮播

    function startAuto(){

        timer=setInterval(function(){

            index++;

            if(index>=lens){

                index=0;

            }

            changeImg();

        },3000)

    }


    // 图片变换函数

    function changeImg(){      

        pics.eq(index).addClass("img-active").parent().siblings().children().removeClass("img-active");

        span.eq(index).addClass("active").siblings().removeClass("active");


    }


    // 整体函数

    function slideImg(){

        $("#banner").mouseenter(function(){

            stopAuto();

        })

        $("#banner").mouseleave(function(){

            startAuto();

        })

        $("#banner").mouseleave();


        for(var i=0;i<lens;i++){

            span.click(function(){

                index=span.index($(this));

                changeImg();

            })

        }       


        // 下一张

        $("#next").click(function(){

            index++;

            if(index>=lens) index=0;

            changeImg();

        })


        // 上一张

        $("#prev").click(function(){

            index--;

            if(index<0) index=lens-1;

            changeImg();

        })

        // 隐藏菜单

        list.mouseenter(function(){

            item.eq($(this).index()).css({"display":"block"});

            $(this).css({"background-color":"#fff"});

            listA.eq($(this).index()).css({"color":"red"});

        })

        item.mouseenter(function(){

            $(this).css({"display":"block"})


        })

        list.mouseleave(function(){

            item.css({"display":"none"});

            $(this).css({"background-color":"red"});

            listA.eq($(this).index()).css({"color":"#fff"});


        })

        item.mouseleave(function(){

            $(this).css({"display":"none"})


        })




        // 第一行菜单栏悬浮效果

        textLi.mouseenter(function(){

            jsHide.eq($(this).index()).removeClass("hide");

            textLi.eq($(this).index()).addClass("see");

        })

        textLi.mouseleave(function(){

            jsHide.addClass("hide");

            textLi.removeClass("see");

        })


        // 购物车悬浮效果

        shopSee.mouseenter(function(){

            shopHide.eq($(this).index()).removeClass("hide");

        })

        shopHide.mouseenter(function(){

            $(this).removeClass("hide");


        })

        shopSee.mouseleave(function(){

            shopHide.addClass("hide");


        })

        shopHide.mouseleave(function(){

            $(this).addClass("hide");


        })


    }


    slideImg();


})


0
收起回答
Steve007 2019-02-19 14:24:25

同学，你好。白色背景是可以显示出来的，同学可以在本地编辑器进行测试，如图：

http://img1.sycdn.imooc.com//climg/5c6b9ce000012cda02060159.jpg

隐藏菜单显示的时候，会影响固定菜单的位置是因为隐藏菜单中有些内容的宽度超出了固定菜单的宽度，因此会影响固定菜单的位置。需要设置固定菜单的宽度大于等于隐藏菜单中元素自适应的最大宽度，如图：

http://img1.sycdn.imooc.com//climg/5c6b9f5b0001762006000159.jpg

祝学习愉快！


0
收起回答
  • 提问者 走去偷柿子呀 #1
    谢谢老师，宽度的问题解决了，但我在本地测试的时候换了几个浏览器，白色背景都显示不出来。而且鼠标悬浮在“卖家中心”时，因为隐藏文本过长，导致banner下移，怎么解决？
    2019-02-19 15:22:45
Steve007 2019-02-19 11:00:07

同学，你好。这是因为这里应该选中的是li元素，因为li是有兄弟元素的的，因此它可以获取的不同的下标。而选中a元素的话，只有它自己一个元素，因此它的下标始终是0，所以只对第一个生效。修改如下：

http://img1.sycdn.imooc.com//climg/5c6b70f10001c2c406790134.jpg

http://img1.sycdn.imooc.com//climg/5c6b711c000113d610010561.jpg

祝学习愉快！

0
收起回答
  • 提问者 走去偷柿子呀 #1
    为什么我的白色背景显示不出来？而且隐藏菜单显示的时候，会影响固定菜单的位置
    2019-02-19 11:29:09
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师的代码中，显示与隐藏的效果，逻辑没搞清楚，如下：
6 0 4
为什么我这个代码没有动画效果
1 0 4
为什么我绑定了transition只是没有动画了但还是可以实现显示和隐藏？
16 0 3
显示与隐藏
0 0 4
老师，请问如何实现子菜单移入不隐藏，移出又隐藏
0 2 4

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师