原生JavaScript技术，jQuery实现下拉菜单

最新推荐文章于 2024-06-13 09:00:00 发布
最新推荐文章于 2024-06-13 09:00:00 发布
阅读量1.4k 收藏 7
点赞数 2
分类专栏： 前端技术分享 文章标签： javascript jquery html css 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46433198/article/details/131979336
版权

一，通过原生JavaScript实现

      原理：利用onMouseOver 和 onMouseOut 事件来触发一个自定义的 change() 函数，实现了鼠标悬停时显示下拉菜单，鼠标移出时隐藏下拉菜单的效果。

  • html部分代码

</ul>
			<ul class="right">
			  <li class="list" onMouseOver="change('list_cur','block')" onMouseOut="change('list_cur','none')">
				  <span>个人中心</span>
				  <div id="list_cur">
				     <a href="#">已完成订单</a>
					  <a href="#">未完成订单</a>
					  <a href="#">我的保险</a>
					  <a href="#">账号安全</a>
					  <a href="#">个人信息</a>
					  <a href="#">常用联系人</a>
				  </div>
				</li>
				    <li class="line">|</li>
			    <li><span>使用须知</span></li>
				    <li class="line">|</li>
				<li><span>收藏夹</span></li>
					<li class="line">|</li>
				<li><span>货物快运</span></li>
					<li class="line">|</li>
				<li><span>联系我们</span></li>
			</ul>

      onMouseOver 和 onMouseOut 事件所含不同参数决定了他们各自实现的效果不同

     第一个参数作为选择器，在函数中选中对应元素

     第二个参数作为display属性值，配合选择语句来决定何时显示，何时隐藏下拉菜单

  • 完整js代码

function change(myid,mode){
	document.getElementById(myid).style.display=mode;//修改id=“myid”的元素的display属性为mode，即list_cur对应的总下拉菜单框架的display属性值，后续css代码有说明
	if(mode=='block'){//显示下拉菜单
		//设置下拉菜单所在的边框
		document.getElementById(myid).style.border="1px solid #eee";
		document.getElementById(myid).style.borderTop="none";
		//设置鼠标滑过的li的边框及背景颜色
		document.getElementById(myid).parentNode.style.backgroundColor="#fff";//修改父节点的css样式
		document.getElementById(myid).parentNode.style.border="1px solid #eee";
		document.getElementById(myid).parentNode.style.borderBottom="none";
	}
	else{
		//当不显示下拉列表时，鼠标滑过的li的边框及背景颜色
		document.getElementById(myid).parentNode.style.backgroundColor="";
		document.getElementById(myid).parentNode.style.border="";
	}	
}

  • css部分代码

.right li{
	cursor: pointer;
	border: 1px solid #f7f7f7;
}
.right li span{padding: 0px 9px;}
.right .list{position: relative;}
.right #list_cur{
	width: 80px;
	position: absolute;
	display: none;                   /*原本的下拉菜单元素被隐藏，通过style.display方法改变display为block，使其显示*/      
	left: -1px;
	top: 30px;
	background-color: #FFFFFF;
	border: 1px solid #EEE;
}
.right #list_cur a{
	display: block;                  /*因为a标签元素是行内元素，改变display值使其能向下排列显示*/
	padding: 10px;
	line-height: 28px;
	color: #6C6C6C;
}
.right #list_cur a:hover{
	background: #f5f5f5;
}

  • 部分样图

  

 

二，利用jQuery技术实现下拉菜单

方法一

         原理：通过初始hide()和toggle()方法设置下拉菜单div的样式是否可见

  • html部分代码

<div class="_002">
                <div id="sanjiao1"><img src="image/iconClose.jpg"></div>
                  <span id="_get">我的设备</span>
          </div>
             <div class="list" >
              <a href="#">01</a>
              <a href="#">02</a>
              <a href="#">03</a>
              <a href="#">04</a>
              <a href="#">05</a>
          </div>

  • css部分代码

     .list a{                                         /*链接标记样式，因为<a>标记是行内元素，所以要转换为块元素以换行*/   
        display: block;
	    padding: 10px;
	    line-height: 28px;
	    color: #6C6C6C;
      }

  • js部分代码

$(function(){
           $(".list").hide();                                       //初始化隐藏下拉菜单的样式
            $("#_get").click(function(){                          //通过一个单击事件，使用toggle()设置下拉菜单div的样式是否可见
              $(".list").toggle();    
    });

  • 部分样图

 

方法二

  原理：通过 slideToggle()方法 实现下拉菜单的下滑与收起

相关代码

<!DOCTYPE html>
<html>
<head>
  <title>好友列表</title>
  <style>
    .device {
      cursor: pointer;
    }

    .contacts {
      display: none;
    }
  </style>
  <script src="jQuery.js"></script>
  <script>
    $(document).ready(function() {
      // 监听我的设备的点击事件
      $('.device').on('click', function() {
        // 切换联系人的显示状态
        $('.contacts').slideToggle();                 //菜单是滑下或收起的，而不是突然隐藏或出现
      });
    });
  </script>
</head>
<body>
  <div class="device">我的设备</div>
  <ul class="contacts">
    <li>联系人1</li>
    <li>联系人2</li>
    <li>联系人3</li>
  </ul>

  <!-- 其他模块 -->
  <div>其他模块</div>

</body>
</html>

部分样图

 

       我是小p，希望与大家分享更多的前端开发的知识，如果你有不同或更好的见解，欢迎在我的评论区留言！

ppsd_number_1
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
鼠标悬浮导航栏显示下拉菜单
hanrabbit的博客
02-03 6269
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.onload = function(){ // 获取需要悬浮的对象 let show = document.getElementById("businessarea"); // 获取被隐藏的菜单 let menu = document.getEl
jQuery下拉菜单的实现
北野的博客
09-09 371
实现效果 html代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下拉菜单</title> <script src="/hello
JS特效第23弹：css3酷炫导航条制作鼠标悬停下拉二级导航菜单
weixin_38343072的博客
12-14 160
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
js实现鼠标框选效果
qiaolezi787的博客
05-22 336
【代码】js实现鼠标框选效果。
JS实现鼠标悬停显示二级菜单简单代码 jQuery实现(DOM操作基本类似)
weixin_46022934的博客
07-16 3775
JS实现鼠标悬停显示二级菜单简单代码 jQuery实现实现图片(效果图) 代码在最下面 实现图片(效果图) 代码在最下面 这是开始的一个标签---->鼠标移动到(div上弹出来下拉菜单) 就成功出现了 简单的代码如下(横向菜单以及竖向菜单,自己可以用table或者浮动解决问题): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http
HTML+CSS+JS 自定义下拉菜单
最新发布
正在创作系列：【若冰说CSS】
06-13 1086
实现了一个下拉菜单的动画效果，包括一个主按钮和一个下拉菜单列表。点击主按钮会展开下拉菜单列表，同时箭头会旋转，列表项会逐渐显示出来。鼠标悬停在列表上时，会出现一个浮动图标。整个下拉菜单的样式比较简洁，使用了黑色和灰色的背景色，以及白色和淡灰色的文字和图标颜色。动画效果使用了 CSS 的过渡和变换属性。
js 实现下拉菜单 完整代码
qq_43435403的博客
08-22 5106
一、js实现下拉菜单 二、解题思路： 三、代码： 1.html <ul id="divBox"> <li class="myLi" onclick="openS(this,0)"> <span class="iconfont icon-maobi front"></span> <span class="font">Diseno
原生js实现下拉多选框组件
qq_62089165的博客
02-12 3538
【代码】原生js实现下拉多选框组件。
鼠标悬浮显示下拉菜单，离开隐藏
weixin_51450341的博客
10-27 4315
结合实际来考虑，下拉菜单和头像需要放在同一容器中。当用户打开下拉菜单需要使用其中的功能时，鼠标位置必然转移，若此时离开头像所在容器的范围，就会触发onmouseout()事件，调用函数，下拉菜单收起。因此头像和下拉菜单必须存放在同一容器中。下拉菜单的显示隐藏只需要设置display的属性就好了，在这个功能中的核心问题是，下拉菜单的位置。不同容器的效果图放在文章最后。
jQuery实现下拉菜单[代码+详细讲解+效果图]
热门推荐
心态的博客
05-09 1万+
jQuery实现下拉菜单[代码+详细讲解+效果图] 非常的高效。
如何使用原生js来实现下拉菜单
weixin_75115821的博客
09-27 1382
下拉菜单在页面中存在无非就是显示和隐藏的效果，鼠标滑动到标题显示下拉菜单，离开的使用关闭下拉菜单，但是在显示隐藏的时候会有一个小条件，就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的，否则就会出现移入标题标签能够显示，但是移除标题标签就直接隐藏了，而我们要的效果是移入标题标签显示下拉菜单，而且移除标题标签，但是鼠标在下拉标签中，下拉菜单是显示的，所以在编写事件的时候，需要注意是由大盒子来控制里面的显示隐藏效果！
JavaScript实现下拉菜单操作
weixin_45650502的博客
09-23 3273
JavaScript实现下拉菜单操作 案例分析： （1）该操作分为两个部分，导航栏和下拉菜单部分，因此需要使用嵌套，一共使用两对ul和li标签，外面的ul构成导航栏框架，在li里面一一对应另一对ul和li,在内层中书写对应的下拉菜单项； （2）在导航栏中，每个li都需要添加鼠标经过效果，因此需要用到循环注册鼠标事件； （3）核心思想：添加点击事件，当鼠标经过 li 里面的第二个孩子（内层的ul)时，使ul显示出来，当鼠标离开时，再将对应的ul隐藏起来。 完整代码如下： <!DOCTYPE html&g
jquery select下拉菜单美化搜索框样式代码
11-10
因此，许多开发者选择使用jQuery插件或者自定义的解决方案来替换原生的`select`元素，以实现更美观、功能更丰富的下拉菜单。 1. **jQuery Select Plugins**：jQuery提供了多种插件，如`Chosen`、`Select2`、`...
jQuery多选下拉菜单
06-01
本主题将深入探讨如何使用jQuery实现一个可以选择多个值的多选下拉菜单。 首先，多选下拉菜单通常由HTML的`<select>`元素与`<option>`元素构成，通过设置`<select>`的`multiple`属性，可以允许用户选择多个选项。...
jQuery下拉菜单选择框特效.zip
10-05
《jQuery下拉菜单选择框特效实现详解》 在网页设计中，下拉菜单选择框是一种常见的交互元素，它能够提供用户简洁高效的选项选择方式。jQuery作为一款强大的JavaScript库，为开发者提供了丰富的API和插件来实现各种...
jQuery Select下拉菜单插件.zip
11-02
jQuery作为一个强大的JavaScript库，提供了丰富的插件来增强原生HTML元素，其中就包括了对下拉菜单的优化。本文将深入探讨jQuery Select下拉菜单插件，了解其工作原理、功能特性以及如何在项目中应用。 一、jQuery ...
jQuery页面左侧伸缩下拉导航菜单.zip
06-07
总结来说，"jQuery页面左侧伸缩下拉导航菜单"是一个利用jQuery库和前端技术实现的交互功能，它结合了HTML、CSS和JavaScript，为用户提供了一种直观、动态的导航体验。通过理解并应用这些技术，开发者可以创建出更...
js实现下拉菜单
weixin_62485207的博客
08-23 833
运用jQuery方便快捷的实现下拉菜单。
使用Bootstrap v3实现鼠标悬停时展开子菜单
yusuhbdybxbdhj的博客
06-29 1111
首先在网页文件中引入bootstrap的三个文件，分别是jquery、js、css这三个文件。这里知识复制了导航栏里面并没有导航栏的子菜单内容，所以这里自行添加一些即可。如果想为子菜单添加的菜单项添加分隔线的话直接使用下面这个标签即可。此时就复制成功了，然后将复制的内容粘贴至html文件中。此时当我的鼠标放在Home上就能自定弹出子菜单列表了。鼠标悬停JavaScript代码全部内容。此时功能就全部实现了！
用ejs +jquery+js+原生htmlselect实现下拉树
05-13
下拉树是一种常见的树形选择控件，可以在下拉框中展示树形结构，用户可以通过下拉框选择树形节点。在实现下拉树时，可以使用ejs模板引擎、jQuery库、JavaScript和原生HTML Select元素。 首先，在HTML文件中创建一个下拉框，并给该下拉框设置id，如下所示： ```html <select id="tree-select"></select> ``` 接下来，使用ejs模板引擎创建下拉树节点的模板，如下所示： ```ejs <% function renderTree(data) { %> <% for (var i = 0; i < data.length; i++) { %> <option value="<%= data[i].id %>"><%= data[i].name %></option> <% if (data[i].children && data[i].children.length > 0) { %> <% renderTree(data[i].children); %> <% } %> <% } %> <% } %> ``` 该模板使用递归方式，遍历树形结构的每个节点，并将节点渲染成下拉框的一个选项。 接下来，使用jQuery库来获取下拉框，并在下拉框中渲染树形结构。具体实现如下所示： ```javascript $(function() { // 模拟树形结构数据 var treeData = [ { id: 1, name: '节点1', children: [ { id: 2, name: '节点1-1', children: [ { id: 3, name: '节点1-1-1' }, { id: 4, name: '节点1-1-2' } ] }, { id: 5, name: '节点1-2' } ] }, { id: 6, name: '节点2' } ]; // 获取下拉框元素 var $select = $('#tree-select'); // 渲染树形结构到下拉框中 renderTree(treeData, $select); // 定义渲染树形结构的函数 function renderTree(data, $select) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; if (data[i].children && data[i].children.length > 0) { renderTree(data[i].children, $select); } } $select.append(html); } }); ``` 上述代码首先定义了一个模拟的树形结构数据，然后获取下拉框元素，并调用渲染树形结构的函数将树形结构渲染到下拉框中。渲染函数中使用了递归方式来遍历树形结构的每个节点，并将节点渲染成下拉框的一个选项。 最后，将上述代码保存为HTML文件并在浏览器中打开该文件，即可看到渲染出来的下拉树。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值