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（）
我们再看看效果

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