上一篇文章我用纯js实现了tap切换栏和下拉菜单，这篇试着用其他更简洁的方法来实现这两个效果。
一、下拉菜单
这里举例上一篇文章的微博下拉菜单案例，html和css的部分仍然和上一个一样，这里仅改变js的代码内容
1、用jQuery实现
核心思路：
①当鼠标经过的时候，显示小li里面的ul；当鼠标离开的时候，隐藏小li里面的ul；
②这个nav>li是使用了子代选择器，只选择和nav紧挨着的小li，避免选到了nav的li的li
③$(this).children("ul").show();是指当鼠标移动到小li上，就显示出小li里面的ul。鼠标离开的同理。
此处children("ul").show()表示显示ul，children("ul").hide()表示隐藏ul。
$(function () {
// 鼠标经过
$(".nav>li").mouseover(function () {
$(this).children("ul").show();
});
// 鼠标离开
$(".nav>li").mouseout(function () {
$(this).children("ul").hide();
})
})总结：使用jQuery的方法比原生js的代码量少了很多，因为jQuery内部有隐式迭代，所以不用像原生一样再利用for循环遍历。
2、用jQuery插件来实现
可以在下面的网站中搜索下拉菜单，去找到需要的样式进行复制。这种方式的优点就是速度快，但如果没有自己需要的样式的话，还需要自己进行修改。
jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)
二、tap切换栏
1、用jQuery实现
这里举例的是淘宝的服饰精品案例
核心思路：
①核心原理：鼠标经过左侧盒子某个小 li，就让内容区盒子相对应图片显示，其余的图片隐藏。
②需要得到当前小 li 的索引号，就可以显示对应索引号的图片
③ jQuery 得到当前元素索引号＄( this ). index ()
④中间对应的图片，可以通过 eq ( index ）方法去选择
⑤显示元素show0；隐藏元素 hide()
这里是html和css的内容
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body> <style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>下面是js的内容
$(function () {
$("#left li").mouseover(function () {
var index = $(this).index();
$("#content div").eq(index).show().siblings().hide();
})
})总结：
主要的思想就是用index()作为选择器，选择第几个小li；
以及$("#content div").eq(index).show().siblings().hide()，意思是选择第index个content的div让它显示内容，然后它的兄弟则隐藏内容。
2、根据后台真实数据渲染
这里主要是实现和后端交互的tap切换，即数据并不是我们在html写死的，而是会根据后台实时的数据进行渲染。我学的不多，这块是跟着黑马的代码写的，只写出js内容。
核心思路：
这里因为小li是动态生成的，所以注册事件需要使用on()来实现，和上面有所差别。
(function () {
// 1. 准备相关数据
var hotData = [
{
city: "北京", // 城市
sales: "25, 179", // 销售额
flag: true, // 上升还是下降
brands: [
// 品牌种类数据
{ name: "可爱多", num: "9,086", flag: true },
{ name: "娃哈哈", num: "8,341", flag: true },
{ name: "喜之郎", num: "7,407", flag: false },
{ name: "八喜", num: "6,080", flag: false },
{ name: "小洋人", num: "6,724", flag: false },
{ name: "好多鱼", num: "2,170", flag: true }
]
},
{
city: "河北",
sales: "23,252",
flag: false,
brands: [
{ name: "可爱多", num: "3,457", flag: false },
{ name: "娃哈哈", num: "2,124", flag: true },
{ name: "喜之郎", num: "8,907", flag: false },
{ name: "八喜", num: "6,080", flag: true },
{ name: "小洋人", num: "1,724", flag: false },
{ name: "好多鱼", num: "1,170", flag: false }
]
},
{
city: "上海",
sales: "20,760",
flag: true,
brands: [
{ name: "可爱多", num: "2,345", flag: true },
{ name: "娃哈哈", num: "7,109", flag: true },
{ name: "喜之郎", num: "3,701", flag: false },
{ name: "八喜", num: "6,080", flag: false },
{ name: "小洋人", num: "2,724", flag: false },
{ name: "好多鱼", num: "2,998", flag: true }
]
},
{
city: "江苏",
sales: "23,252",
flag: false,
brands: [
{ name: "可爱多", num: "2,156", flag: false },
{ name: "娃哈哈", num: "2,456", flag: true },
{ name: "喜之郎", num: "9,737", flag: true },
{ name: "八喜", num: "2,080", flag: true },
{ name: "小洋人", num: "8,724", flag: true },
{ name: "好多鱼", num: "1,770", flag: false }
]
},
{
city: "山东",
sales: "20,760",
flag: true,
brands: [
{ name: "可爱多", num: "9,567", flag: true },
{ name: "娃哈哈", num: "2,345", flag: false },
{ name: "喜之郎", num: "9,037", flag: false },
{ name: "八喜", num: "1,080", flag: true },
{ name: "小洋人", num: "4,724", flag: false },
{ name: "好多鱼", num: "9,999", flag: true }
]
}
];
// 2. 根据数据渲染各省热销 sup 模块内容
// (1) 遍历 hotData对象
var supHTML = "";
$.each(hotData, function (index, item) {
//因为数据不是写死的，所以不能像之前的方法直接写。
//这里使用了一种新的连接字符的方法：`${}`,这样写的好处是可以换行
//这里还使用了三元表达式，用来判断flag是true还是false，不同的结果会返还不同的图标内容，所以不能直接写${}
supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
});
// 把生成的5个小li字符串给 sub dom盒子
$(".sup").html(supHTML);
// 3. 当鼠标进入 tab 的时候
// 鼠标经过当前的小li要高亮显示
$(".province .sup").on("mouseenter", "li", function () {
index = $(this).index();
render($(this));
});
// 声明一个函数 里面设置sup当前小li高亮还有 对应的品牌对象渲染
// 这个函数需要传递当前元素进去
function render(currentEle) {
currentEle
.addClass("active")
.siblings()
.removeClass();
// 开始遍历品牌数组
var subHTML = "";
// 可以通过hotData[$(this).index()] 得到当前的城市
// 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类
$.each(hotData[currentEle.index()].brands, function (index, item) {
// 对应城市的每一个品牌对象
subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=
${item.flag ? "icon-up" : "icon-down"}
></s></span></li>`;
});
// 把生成的6个小li字符串给 sub dom盒子
$(".sub").html(subHTML);
}
})();
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
