废话不多说,直接看效果:
今天主要是想讲一下这个全部服务分类的列表及鼠标移入后的效果的实现,但最重要的其实是这个页面html结构以及css的实现。
本着把项目各功能做到最优,复用性更强的原则,我们来分析一下它js后面要实现的功能,然后我们通过js要实现的功能去判断怎样让html的代码结构可以让js更流利。
首先,我们要考虑到的是这个全部服务分类下面的这些分类在其他页面是隐藏的,只有当鼠标移入的时候,它才会显示,所以绝对不能相对定位。
其二,我们要考虑到的是鼠标移入服务分类,他的各分类又显示出来,我之前的做法是让这个子分类相对于分类这个块,却发现子分类会随着分类位置的变化而改变,所以肯定不能这么做。后面我的做法是让分类与子分类都绝对定位,相对于包裹他们和全部服务列表栏目的盒子,这样的话,既不会让子分类随着分类位置的改变而改变,又可以让后面的复用性更强,是个一举多得的办法。之前有篇写列表靠在一起,但是鼠标移入边框变色的那个问题,这个里面核心地一句,Position:relative在这个里面同样也是一个知识点,如果不能加这一句的话,那么鼠标移入分类,分类的边框和子分类的边框就会重叠,所以鼠标移入时,子分类的位置相对了,就自然而然有边框变白色显现出来了。
为了清楚地把上述文字清晰地表述清楚,我依然用一个Demo来说明,具体内容如下:
<style>
#boxWrap{position:relative;width:500px;margin:100px auto;}
.typeName{width: 150px;height: 30px;font-size:14px;color:#FFF;line-height: 30px;text-align:center;background: #FF7300;}
.typeContentWrap{display: none;}
.typeList{position: absolute;top:30px;left: 0;width: 150px;}
.typeList .subType{float: left;}
.typeList .subType .tit{width: 148px;height: 30px;line-height: 30px;text-align:center;border-left:1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;}
.typeList .subType>.tit.active{position:relative;z-index:10000;width: 149px;border-top:1px solid #FF7300;border-left:1px solid #FF7300;
border-bottom:1px solid #FF7300;border-right: 1px solid #FFF;}
.eachSubTypeWrap{position:absolute;top:0;left:150px;display:none;padding:10px 20px;border:1px solid #FF7300;}
.eachSubTypeWrap h3{height:24px;line-height:24px;font-size: 14px;}
.subWrap{margin-bottom: 10px;}
.subInnerTypeUl{width: 400px;z-index: 999;}
.subInnerTypeUl .subInnerType{float: left;margin-right:20px;height: 24px;line-height: 24px;}
</style>
这是css代码,下面的是html代码:
<div id="boxWrap">
<h1 class="typeName">全部服务分类</h1>
<div class="typeContentWrap">
<ul class="typeList cf">
<li class="subType">
<div class="tit">分类一</div>
<div class="eachSubTypeWrap cf">
<div class="subWrap fl">
<h3>子分类一标题1</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类一标题2</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类一标题3</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类一标题4</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类一标题5</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
</div>
</li>
<li class="subType">
<div class="tit">分类二</div>
<div class="eachSubTypeWrap cf">
<div class="subWrap fl">
<h3>子分类二标题1</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类二标题2</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
</div>
</li>
<li class="subType">
<div class="tit">分类三</div>
<div class="eachSubTypeWrap cf">
<div class="subWrap fl">
<h3>子分类三标题1</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类三标题2</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类三标题3</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类三标题4</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类三标题4</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类三标题5</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类三标题5</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类三标题5</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
</div>
</li>
<li class="subType">
<div class="tit">分类四</div>
<div class="eachSubTypeWrap cf">
<div class="subWrap fl">
<h3>子分类四标题1</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类四标题2</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类四标题3</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类四标题4</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
</div>
</li>
<li class="subType">
<div class="tit">分类五</div>
<div class="eachSubTypeWrap cf">
<div class="subWrap fl">
<h3>子分类五标题1</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类五标题2</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类五标题3</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类五标题4</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类五标题4</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类五标题5</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类五标题5</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
</div>
</li>
<li class="subType">
<div class="tit">分类六</div>
<div class="eachSubTypeWrap cf">
<div class="subWrap fl">
<h3>子分类六标题1</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类六标题2</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类六标题3</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类六标题4</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
<div class="subWrap fl">
<h3>子分类六标题5</h3>
<ul class="subInnerTypeUl cf">
<li class="subInnerType">西瓜</li>
<li class="subInnerType">桃子</li>
<li class="subInnerType">橘子</li>
<li class="subInnerType">哈密瓜</li>
<li class="subInnerType">苹果</li>
<li class="subInnerType">香蕉</li>
<li class="subInnerType">菠萝</li>
<li class="subInnerType">提子</li>
<li class="subInnerType">柿子</li>
<li class="subInnerType">柚子</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
然后是效果切换的js,没有什么技术含量,这个简单地看下就好
<script>
$(function(){
$("#boxWrap").hover(function(){
$(".typeContentWrap").show();
},function(){
$(".subType").removeClass('active');
$(".typeContentWrap").hide();
});
$(".subType").hover(function(){
$(this).find(".eachSubTypeWrap").show();
$(this).find(".tit").addClass('active').siblings().removeClass('active');
},function(){
$(this).find(".eachSubTypeWrap").hide();
$(".tit").removeClass('active');
});
});
</script>