HTML+JS模拟实现QQ下拉菜单效果
更新时间：2022年05月23日 10:06:49 作者：一夕ξ
这篇文章主要为大家详细介绍了如何利用HTML+JavaScript模拟实现QQ中的下拉菜单效果。文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下
功能：
1、点击我的好友会展开下拉出具体的好友
2、再次点击，会折叠内容
3、首次点击某个具体的好友，只有当前这个好友高亮
4、再次点击这个好友时，高亮状态就会消失
主要练习：js绑定事件
慢慢修改小细节：再次点击，会折叠内容时，里面的高亮要全部取消
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: auto;
padding: 0px
}
.content {
position: relative;
top: 40px;
width: 280px;
height: auto;
border: 1px solid black;
margin: 0 auto
}
span {
display: inline-block;
border-bottom: 1px dotted grey;
width: 100%;
background-color: red;
}
li {
padding-left: 20px;
list-style: none;
}
ul {
display: none
}
</style>
</head>
<body>
<div class="box1">
<div class="content">
<div class="cl1"><span>
<img src="右箭头.png" alt="" style="width:20px;height:20px;vertical-align: text-bottom;"> 我的好友
</span>
<ul>
<li>lili</li>
<li>zhangsan</li>
<li>uncle</li>
</ul>
</div>
<div class="cl1">
<span>
<img src="右箭头.png" alt="" style="width:20px;height:20px;vertical-align: text-bottom;">企业好友
</span>
<ul>
<li>lili</li>
<li>zhangsan</li>
<li>uncle</li>
</ul>
</div>
<div class="cl1"><span>
<img src="右箭头.png" alt="" style="width:20px;height:20px;vertical-align: text-bottom;">黑名单
</span>
<ul>
<li>lili</li>
<li>zhangsan</li>
<li>uncle</li>
<li>unle</li>
<li>une</li>
</ul>
</div>
</div>
</div>
<script>
//点击分组，颜色改变，下面的选项出来
var cls = document.querySelectorAll('span')
var uls = document.querySelectorAll('ul')
for (i = 0; i < cls.length; i++) {
cls[i].addEventListener('click', function() {
if (this.flag == 0) {
this.style.backgroundColor = 'skyblue'
this.children[0].src = '实 向下箭头-01.png'
console.log(uls[this.index]);
uls[this.index].style.display = 'block'
this.flag = 1
} else if (this.flag == 1) {
this.style.backgroundColor = 'red'
this.children[0].src = '右箭头.png'
console.log(uls[this.index]);
uls[this.index].style.display = 'none'
this.flag = 0
//需要把li全部取消高亮
for (j = 0; j < uls.length; j++) {
for (m = 0; m < uls[j].children.length; m++) {
uls[j].children[m].style.backgroundColor = 'white'
uls[j].children[m].states = 0
}
}
}
})
cls[i].index = i //通过添加一个属性，进行索引
cls[i].flag = 0
}
for (i = 0; i < uls.length; i++) { //利用事件冒泡对具体好友绑定点击事件
uls[i].addEventListener('click', function(e) {
console.log(e.target);
console.log(e.target.states);
if (e.target.states == 0) {
// this.style.backgroundColor = 'pink'//不能用this，这里的this指向的是uls[i]
e.target.style.backgroundColor = 'pink'
e.target.states = 1
} else if (e.target.states == 1) {
// this.style.backgroundColor = 'pink'//不能用this，这里的this指向的是uls[i]
e.target.style.backgroundColor = 'white'
e.target.states = 0
}
})
console.log(uls[i].children.length);
for (j = 0; j < uls[i].children.length; j++) {
uls[i].children[j].states = 0
}
}
///关键在于第二次重复点击
</script>
</body>
</html>需要加索引时，一般说通过自定义属性来设置
可以将该元素视为一个对象，为期添加一个属性，就可以进行索引
另外一种可以在for循环，使用闭包原理
相比，加属性的方法更加方便
以上就是HTML+JS模拟实现QQ下拉菜单效果的详细内容，更多关于JS QQ下拉菜单的资料请关注脚本之家其它相关文章！
相关文章
BootStrap实现带有增删改查功能的表格(DEMO详解)
这篇文章主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧2016-10-10
这篇文章主要为大家详细介绍了js实现九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了JS实现身份证输入框的输入效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了layui table checked获取选中数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在js中，我们一般将所有的任务都分成两类，一种是同步任务，另外一种是异步任务。而在异步任务中，又有着更加细致的分类，那就是微任务和宏任务。本文将详细讲解这二者的原理与使用，需要的可以参考一下2022-05-05
这篇文章介绍了ECharts异步加载数据与数据集（dataset），文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
javascript时间戳和日期字符串相互转换代码(超简单)
下面小编就为大家带来一篇javascript时间戳和日期字符串相互转换代码(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下2015-10-10
图片自动更新(说明)...2006-10-10![javascript打造跨浏览器事件处理机制[Blue-Dream出品]](//img.jbzj.com/images/xgimg/bcimg9.png)
javascript打造跨浏览器事件处理机制[Blue-Dream出品]
由于浏览器兼容的复杂性.打造一个较优的跨浏览器事件处理函数.不是件容易的事情.各大类库也都通过了种种方案去抽象一个庞大的事件机制.2010-07-07
![javascript打造跨浏览器事件处理机制[Blue-Dream出品]](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论