js自定义QQ菜单效果


Posted in Javascript onJanuary 10, 2017

QQ菜单大家都见过,这样有以下的功能:
1.点击我的好友,会展示下拉出具体的好友
2.再点击我的好友,会收缩
3.首次点击具体的某个好友,只有当前这个好友高亮
4.再次点击这个好友时,高亮状态就消失了

还是瞄一眼效果图吧:

js自定义QQ菜单效果

最后代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
ul,h2 {padding:0;margin:0;}
li{list-style:none;}
#list{width:200px;margin:0 auto;border:1px solid #000;}
#list{width:200px;}
#list h2{width:200px;height:30px;line-height:30px;text-align:center;background:url(img/ico1.gif) no-repeat 20% 50% #6699FF;text-indent:24px;border-bottom:1px dotted #000;}
#list h2.active{background:url(img/ico2.gif) no-repeat 20% 50% #FFCC99;}
#list ul{width:200px;text-align:center;display:none;}
#list ul li{width:200px;height:30px;line-height:30px;}
#list ul li.highlight{background:#FF66FF;}
</style>
<title>无标题文档</title>
<script>
window.onload = function () {
 var oUl = document.getElementById('list');
 var oH2 = oUl.getElementsByTagName('h2');
 var aUl = oUl.getElementsByTagName('ul');
 var aLi = [];
 var arr = [];
 var oldLi = null;
 var num = 0;

 // 点击菜单显示隐藏
 for( var i = 0; i < oH2.length; i++ ) {
 oH2[i].index = i;
 oH2[i].onclick = function () {
  if (this.className === '') {
  aUl[this.index].style.display = 'block';
  this.className = 'active';
  } else {
  aUl[this.index].style.display = 'none';
  this.className = '';
  }
 }
 }
 // 获取菜单中的每个li
 for ( var i = 0; i < aUl.length; i++ ) {
 aLi = aUl[i].getElementsByTagName('li');
 for ( var j = 0; j < aLi.length; j++ ) {
  arr.push(aLi[j]);
 }
 }
 // 遍历aLi
 for ( var i = 0; i < arr.length; i++ ) {
 arr[i].onOff = false;
 arr[i].onclick = function () {
  // 当上一个点击的li不是当前点击的Li
  if (oldLi && oldLi !== this) {
  oldLi.className = '';
  oldLi.onOff = false;
  }
  this.className = this.onOff ? '' : 'highlight';
  this.onOff = !this.onOff;
  oldLi = this;
 }
 }
}
</script>
</head>

<body>
<ul id="list">
 <li class="lis">
 <h2>我的好友</h2>
 <ul>
  <li>张三1</li>
  <li>张三2</li>
  <li>张三3</li>
 </ul>
 </li>
 <li class="lis">
 <h2>企业好友</h2>
 <ul>
  <li>李四1</li>
  <li>李四2</li>
  <li>李四3</li>
 </ul>
 </li>
 <li class="lis">
 <h2>黑名单</h2>
 <ul>
  <li>王五1</li>
  <li>王五2</li>
 </ul>
 </li>
</ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 树形导航菜单实例代码
Aug 13 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
vue.js表格分页示例
Oct 18 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
js实现将json数组显示前台table中
Jan 10 #Javascript
详解Vue自定义过滤器的实现
Jan 10 #Javascript
JS实现的表头列头固定页面功能示例
Jan 10 #Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 #Javascript
微信小程序 地图map详解及简单实例
Jan 10 #Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 #Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 #Javascript
You might like
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php 进度条实现代码
2009/03/10 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue项目打包编译优化方案
2020/09/16 Javascript
Python 中的 else详解
2016/04/23 Python
详解Python装饰器由浅入深
2016/12/09 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
python 如何实现遗传算法
2020/09/22 Python
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
大学生优秀的自我评价分享
2013/10/22 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
法制宣传标语集锦
2014/06/25 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL