整个逻辑很简单,没什么——
//注意一个区别就好:
$(select).index(this);
$(this).index();
它们两者的区别——
————
第一个是至返回的选择器的数组中所选择的第几项——
第二个是当前选择的元素,在同胞元素中所排列的位置——
(自行百度)
下面:
html
这里面主要是左侧列表的内容信息;
js引用,jq引用,css引用省略——
<body>
<!--这些事mask层-->
<div class="mask"></div>
<!--这里是抽层-->
<div class="draw">
<div class="draw_logo" > <img class="draw_logo_img" src="img/logo.png"/> </div>
<div class="draw_box02" > <img class="draw_box02_img" src="img/home.png"/>
<div class="draw_box02_mess">首页</div>
</div>
<!--这里我故意写成二级列表跟一级列表并列-->
<div>
<div class="draw_box02" > <img class="draw_box02_img" src="img/solution.png"/>
<div class="draw_box02_mess">001</div>
</div>
<div class="draw_box02_box">
<div class="draw_box02_list">001——01</div>
<div class="draw_box02_list">001——02</div>
<div class="draw_box02_list">001——03</div>
<div class="draw_box02_list">001——04</div>
</div>
</div>
<!--这里我故意写成二级列表跟一级列表并列-->
<div>
<div class="draw_box02" > <img class="draw_box02_img" src="img/solution.png"/>
<div class="draw_box02_mess">002</div>
</div>
<div class="draw_box02_box">
<div class="draw_box02_list">002——01</div>
<div class="draw_box02_list">002——02</div>
<div class="draw_box02_list">002——03</div>
<div class="draw_box02_list">002——04</div>
</div>
</div>
<!--这里我故意写成二级列表跟一级列表并列-->
<div>
<div class="draw_box02" > <img class="draw_box02_img" src="img/solution.png"/>
<div class="draw_box02_mess">003</div>
</div>
<div class="draw_box02_box">
<div class="draw_box02_list">003——01</div>
<div class="draw_box02_list">003——02</div>
<div class="draw_box02_list">003——03</div>
<div class="draw_box02_list">003——04</div>
</div>
</div>
<!--这是主界面-->
<div class="head"> <img class="head_more" src="img/more.png" /> </div>
<div class="body"> </div>
</body>
css的简单展示(方便复制粘贴)——
里面有一些没有用的样式代码,懒得删除——
@charset "UTF-8";
/* CSS Document */
html,body{
padding:0px;
margin: 0;
background: #f2f2f2;
font-size: 12px;
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}
.head{
position:fixed;
width:100%;
height:44px;
top:0;
left:0;
background: #000000;
z-index: 100;
}
.head_more{
position:absolute;
width:30px;
height:30px;
top:0;
bottom:0;
left:10px;
margin: auto;
}
/*mask*/
.mask{
position:fixed;
width:100%;
height:100%;
background: #000000;
opacity: 0.5;
z-index: 101;
}
.draw{
position:fixed;
width:240px;
height:100%;
background: #175CA5;
z-index: 102;
left:-240px;
/* left:0px;*/
color:#ffffff;
/* white-space: nowrap;*/
overflow-y: auto;
}
.draw_logo{
position:relative;
width:100%;
height:60px;
margin:0;
paddind:0;
}
.draw_logo_img{
position:absolute;
width:240px;
height:auto;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
.draw_box02{
position:relative;
width:240px;
height:50px;
background: #11338E;
margin: 2px 0 ;
}
.draw_box02_img{
position:absolute;
width:30px;
height:30px;
left:20px;
top:0;
bottom:0;
margin: auto;
}
.draw_box02_mess{
position:absolute;
height:20px;
top:0;
bottom:0;
left:60px;
font-size: 14px;
font-weight: 700;
margin: auto;
}
.draw_box02_box{
position:relative;
width:100%;
}
.draw_box02_list{
position:relative;
width:240px;
height:42px;
background: #10296D;
margin: 1px 0 ;
text-align: center;
line-height: 42px;
}
.draw_box02_img02{
position:absolute;
width:8px;
height:13px;
top:0;
bottom:0;
right:20px;
margin: auto;
}
.null02{
position:relative;
width:100px;
height:20px;
}
.hr{
position:absolute;
margin:0;
padding: 0;
width:80%;
height:1px;
background: #ffffff;
left:0;
right:0;
bottom:0;
margin: auto;
}
.draw_box02_text{
position:absolute;
color: #ffffff;
width:80%;
height:50px;
right:0;
left:0;
margin: auto;
font-size: 14px;
line-height: 50px;
border-style:none none none none; /* 上 右 下 左 */
background-color:transparent;
}
js代码(用JQ来写)——
注意
$(select).index(this);
$(this).index();
两者之间的区别(html的结构我故意没有采取同级并列的写法,主要就是来体现两者的区别——)
$(document).ready(function () {
//这里我采用了continue的方法;主要是避免第一项为“首页”没有二级列表的问题;
//当然也可以使用var i = 1 ;来直接选择避免它——;
function close(e){
for (var i = 0; i < $(".draw_box02").length; i++) {
if(i==0){
continue;
}
$(".draw_box02").eq(i).next().hide(200);
}
};
//这里在ready中,直接调用函数,并且关闭蒙版层(这里有弊端)——
$(".mask").hide();
close();
// 抽屉打开事件---------------------------------------
//这里没什么,主要就是运用jq的animate来动画控制开关——以及蒙版层的显示与隐藏
$(".head_more").click(function () {
$(".mask").show();
$(".draw").animate({
left: "0px"
}, 200);
});
// 抽屉关闭事件
$(".mask").click(function () {
$(".mask").hide();
$(".draw").animate({
left: "-240px"
}, 200);
});
//二级列表的展示与关闭————
//对于$(this).index();都很熟悉,但是这里不能用,因为我的html结构的关系,
//首页选项的索引永远是1;其他的索引永远是0;
//所以这里只能使用$(".draw_box02").index(this);(当初也是在这里采坑了)
//第一个首页直接跳转至相关页面——
//其他的是展开二级列表页面
//is(":hidden")方法是用来判定元素是否处于隐藏状态;
$(".draw_box02").click(function () {
if($(".draw_box02").index(this) == 0){
window.location.href = "index.html";
};
if($(this).next().is(":hidden")){
close();
$(this).next().toggle(200);
}else{
$(this).next().toggle(200);
}
});
});
具体效果就不展示了——;
可以直接复制粘贴查看效果——