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

老白 4个月前 349浏览 0评论

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

GIF.gif jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单(子菜单) js/jQuery

这样的特效必须使用到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,再点击后可切换类名,而类必须有显示和隐藏的属性!

评论