jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单（子菜单）

今天一个zblog模板用户提出再模板中需要加入一个菜单展开/显示、收缩/隐藏功能，点击可展开，再次点击就可以关闭的导航菜单，如下图所示：

这样的特效必须使用到JS才行，使用jQuery最佳！

所以上方这段特效所需要的代码如下：

!doctype html>
    html>
    head>
    meta charset="utf-8">
    meta name="author" content="http://www.softwhy.com/" />
    title>
    JS/JQuery鼠标点击可展示/显示、隐藏/关闭导航菜单的子菜单/title>
    style type="text/css">
* {
     padding: 0px;
     margin: 0px;
     font-family: microsoft yahei;
}
.container {
     margin: 20px;
     border: 1px solid #000;
     width: 240px;
     overflow: hidden;
}
li {
     list-style: none;
}
.container li {
     background: #63f7ff;
     width: 240px;
     color: #000;
     font-size: 18px;
     cursor: pointer;
     line-height: 2em;
}
.container li span {
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
     border-left: 10px solid #000;
     border-bottom: 5px solid transparent;
     display: inline-block;
     margin: 0 10px;
}
.container li .down {
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 10px solid #000;
}
.small li {
     background: #fff;
     color: #000;
     border: 1px solid #ddd;
     font-size: 16px;
     padding-left: 30px;
}
.small li:hover {
     background: #63f7ff;
}
.hide {
     display: none;
}
.container ul .color {
     background: #f7f794;
}
    /style>
    script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
    /script>
    script type="text/javascript">
$(document).ready(function () {
      $('.container>
    ul>
li').click(function () {
        $(this).toggleClass('color');
        $(this).find('span').toggleClass('down');
        $(this).next().toggleClass('hide');
  }
)}
    );
    /script>
    /head>
    body>
    div class="container">
      ul>
        li>
    span>
    /span>
    前端教程/li>
        ul class="small hide">
          li>
    蚂蚁部落一/li>
          li>
    蚂蚁部落二/li>
          li>
    蚂蚁部落三/li>
        /ul>
        li>
    span>
    /span>
    资源专区/li>
        ul class="small hide">
          li>
    特效下载/li>
          li>
    移动端特效/li>
          li>
    蚂蚁部落/li>
        /ul>
        li>
    span>
    /span>
    黑名单/li>
        ul class="small hide">
          li>
    百度/li>
          li>
    网易/li>
          li>
    腾讯/li>
        /ul>
      /ul>
    /div>
    /body>
    /html>
    

 其实方法还是非常简单的，主要使用了toggleClass，再点击后可切换类名，而类必须有显示和隐藏的属性！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！