移动端左侧抽屉点击二级列表——_vue 在移动端是显示抽屉式导航栏-CSDN博客

本文链接：https://blog.csdn.net/Mr_ccup/article/details/90633932

整个逻辑很简单，没什么——

//注意一个区别就好：
$(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);
        }
    });
    
});