JavaScript实现下拉菜单的显示隐藏
更新时间：2021年09月30日 17:23:45 作者：qq_39111074
这篇文章主要为大家详细介绍了JavaScript实现下拉菜单的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现下拉菜单显示隐藏的具体代码，供大家参考，具体内容如下
有时需要这种页面效果：
鼠标移动到元素上面时，实现下拉菜单
鼠标移开元素后，下拉菜单不见了
实现思路
1、一个盒子里包含上下两部分，下面部分为子菜单，先设置为隐藏：display: none;
2、当鼠标移动到盒子上：触发事件- - -onmouseover ，js设置下面部分子菜单的display值为- - -block，使子菜单显示
3、鼠标移开盒子：触发事件- - -onmouseout ，js又设置下面部分子菜单的display值为- - -none，使子菜单又隐藏起来
4、字体颜色，背景颜色等样式的改变，根据所需进行相应变化
代码示例
<!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>操作元素-新浪下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
color: #4c4c4c;
}
a:hover {
color: #e88415;
}
.box {
width: 80px;
margin: 50px auto;
font-size: 14px;
color: #4c4c4c;
}
.weibo {
position: relative;
background-color: #fcfcfc;
}
.weibo a {
display: block;
height: 40px;
line-height: 40px;
padding-left: 20px;
}
.change {
color: #f9a74f;
background-color: #edeef0;
}
i {
position: absolute;
top: 50%;
right: 15px;
margin-top: -4px;
width: 5px;
height: 5px;
border-bottom: 1px solid orangered;
border-right: 1px solid orangered;
transform: rotate(45deg);
}
.weiboList {
display: none;
}
.weiboList li a {
display: block;
width: 80px;
height: 33px;
line-height: 33px;
padding-left: 15px;
border-bottom: 1px solid #fecc5b;
background-color: #fff;
}
.weiboList li a:hover {
background-color: #fff5da;
}
</style>
</head>
<body>
<div class="box">
<div class="weibo"><a href="#" >微博<i class="select"></i></a></div>
<ul class="weiboList">
<li><a href="#" >私信</a></li>
<li><a href="#" >评论</a></li>
<li><a href="#" >@我</a></li>
</ul>
</div>
<script>
var box = document.querySelector('.box');
var weibo = document.querySelector('.weibo');
var weiboList = document.querySelector('.weiboList');
box.onmouseover = function() {
weibo.className = 'weibo change'
weiboList.style.display = 'block';
}
box.onmouseout = function() {
weibo.className = 'weibo';
weiboList.style.display = 'none';
}
</script>
</body>
</html>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript中localStorage对象存储方式实例分析
这篇文章主要介绍了JavaScript中localStorage对象存储方式,结合实例形式分析了localStorage对象存储数据的原理及操作技巧,需要的朋友可以参考下2017-01-01
当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。2015-06-06
这篇文章主要介绍了小程序接口的promise化的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
JavaScript实现点击改变图片形状(transform应用)
这篇文章主要为大家详细介绍了JavaScript实现点击改变图片形状，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
在原页面一张图片上添加了一个链接，链接中有中文，于是在跳转过程中出现中文乱码问题，下面给大家分享下解决方案2016-12-12
vite打包优化vite-plugin-compression的使用示例详解
这篇文章主要介绍了vite打包优化vite-plugin-compression的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
DFS(Depth first search)称作「深度优先遍历」，BFS(Breadth first search)称作「广度优先遍历」。本文将通过JavaScript遍历实现这两种算法，需要的可以参考一下2023-01-01
这篇文章主要为大家详细介绍了原生js的RSA和AES加密解密算法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了js检测输入内容全为空格的方法,,需要的朋友可以参考下2014-05-05
本文将给大家详细介绍一下iframe的基本介绍与使用,iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签,它可以在一个页面中显示来自其他页面的内容,需要的朋友可以参考下2024-02-02
最新评论