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

资料来源：网络整理时间：2023/3/4 0:57:43 共计：3601 浏览

今天一个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，再点击后可切换类名，而类必须有显示和隐藏的属性！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jquery 鼠标触发，抽屉式幻灯片左右切换 - 图片展开收缩代码_js/jQuery | ·下一条：JS 鼠标点击切换网站颜色样式方法_js/jQuery