jQuery实现菜单的隐藏和显示

首先我们先制作好菜单的大致框架，然后再利用jQuery对菜单的隐藏和显示属性进行判断，如果是隐藏的就显示，如果是显示的就隐藏

我们先用一个ul写出大概的框架

ul>li*4这是一个简便的写法按tab键就可以实现如下的效果
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul>
<li>学生管理
<ul>
<li>添加学生</li>
<li>修改学生</li>
<li>删除学生</li>
</ul>
</li>
<li>班级管理
<ul>
<li>添加班级</li>
<li>修改班级</li>
<li>删除班级</li>
</ul>
</li>
<li>教师管理
<ul>
<li>添加教师</li>
<li>修改教师</li>
<li>删除教师</li>
</ul>
</li>
</ul>

我们先在大的ul里面写三个li，然后再在每一个li里面写一个ul，

效果如图所示



接下来就是对ul添加样式

由于这里我们不好添加对应的CSS样式，所以改用section的方法

section和div的区别

这里我们用一个大的section来包住所有的标题

然后再给每一个标题用一个ul来表示

div*3 按tab 进行快速编码

<section>
<div>学生管理</div>
<ul>
<li>添加学生</li>
<li>修改学生</li>
<li>删除学生</li>
</ul>
<div>班级管理</div>
<ul>
<li>添加班级</li>
<li>修改班级</li>
<li>删除班级</li>
</ul>
<div>教师管理</div>
<ul>
<li>添加教师</li>
<li>修改教师</li>
<li>删除教师</li>
</ul>
</section>

这里可以直接在div的后面写ul不用div包起来



然后我们为每一个div添加一个css样式

div{
width: 200px;
height: 25px;
background-color: lightcyan;
line-height: 25px;
border: 1px solid lightgray;
padding-left: 25px;
font-size: 15px;
}
ul{
font-size: 15px;
}

如图所示


那么下面我们的任务就是为每一个div添加一个点击事件，先判断属性是隐藏还是显示，如果是显示就设置为隐藏，如果是隐藏就显示

我们先把默认第一个显示 第二个和第三个隐藏

$("ul:eq(1),ul:last-child").hide();

//  先将第二个和最后一个隐藏
$("ul:eq(1),ul:last-child").hide();
$("div").click(function(){
//      console.log($(this));
//这里选中的div,而我们要隐藏的是ul,所以要用next()
var ul= $(this).next()
if(ul.is(":hidden")){
ul.show();
}else{
ul.hide();
}
})

但是这里又有一个问题是，我们需要点击另外一个的同时将已经显示隐藏起来

var click_ul= $(this).next();
if(click_ul.is(":hidden")){
//          在让点击的ul显示的时候,需要将所有的ul先隐藏
$("ul").hide();
click_ul.show();
}else{
click_ul.hide();
}

那么现在我们就已经实现了所有的功能



但是这个效果有点生硬，我们可以将隐藏换成slideup（），把show（）换成slidedown（）

我们再看看效果



这个和上面相比就没有那么生硬了