jQuery实现下拉菜单

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 10:18-->
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>jQuery下拉菜单</title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;padding-left: 10px;background-image: url(images/bg.jpg);}.wrap li{background-image: url(images/libg.jpg);}.wrap > ul > li {float: left;margin-right: 10px;position: relative;}.wrap a {display: block;height: 30px;width: 100px;text-decoration: none;color: #000;line-height: 30px;text-align: center;}.wrap li ul {position: absolute;top: 30px;display: none;}</style>
</head>
<body>
<div class="wrap"><ul><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li></ul>
</div>
</body><script src="jquery-1.12.4.js"></script><script>$(function () {//需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。//      给一级菜单li设置鼠标离开事件，二级菜单隐藏。//1.给一级菜单li设置鼠标移入事件，二级菜单显示。// 获取一次菜单li 的方式$('.wrap > ul > li').mouseover(function () {// $('.wrap > ul > li > ul').css('display', 'block');// console.log(this); // 谁触发了 鼠标移入事件, 那这个 this 还是一个 dom对象// 如果希望这个 dom对象, 调用 jquery方法, 那需要 $(this), 将 dom对象 -> jquery对象// 只获取 ul 这个元素// $(this).children('ul').css('display', 'block'); // 显示就是修改 display属性为block$(this).children('ul').show(); // show()方法本质还是更新 display属性为block});//2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。$('.wrap > ul > li').mouseout(function () {$(this).children('ul').hide(); // hide()本质上, 还是更新 display属性为 none});//3.思考题://为什么不给一级菜单a标签设置鼠标移入和离开事件?//因为这样的话,选不到二级菜单.// 首先找到a// console.log($('.wrap > ul > li > a'));// 鼠标移入, 显示// $('.wrap > ul > li > a').mouseover(function () {//     // console.log(this); // output: <a href="javascript:void(0);">一级菜单1</a> 这说明 this是 dom对象//     // console.log($(this)); // output: jQuery.fn.init [a, context: a] 这说明 $(this) 是 jquery对象//     // 找 a 的 下一个兄弟 ul//     // console.log($(this).siblings('ul')); // output: jQuery.fn.init [ul, prevObject: jQuery.fn.init(1), context: a]//     $(this).siblings('ul').show();// });//// // 鼠标移出, 隐藏// $('.wrap > ul > li > a').mouseout(function () {//     $(this).siblings('ul').hide();// });});</script>
</html>

jQuery实现下拉菜单相关推荐

使用jQuery完成下拉菜单
开发工具与关键技术:Adobe Dreamweaver CC 2017 jQuery 作者:孙水兵撰写时间:2019年2月21 用jQuery实现下拉菜单是一件很简单的事,主要是进行css的编写,将 ...
jquery php下拉列表,JQuery三级下拉菜单
摘要: jQuery三级下拉菜单首页内容动画动画2 3级菜单→ 我是3级菜单我是3级菜单我是3级菜单动画2 3级菜单→ 我是3级菜单我是3级菜单 4级菜单→ 我是4级菜单我是4级菜单 ...
html下拉菜单插件,简单的jQuery大型下拉菜单插件
booNavigation是一款简单的jQuery大型下拉菜单插件.通过该插件可以制作3列大型下拉菜单,并带有平滑过渡效果,以及鼠标滑过菜单项时的动画效果. 使用方法在页面中引入jquery和boo ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
jQuery练习——下拉菜单
哈喽大家好,本次是jQuery案例练习系列第一期,本期是用jQuery实现下拉菜单. 笔者还是前端的菜鸟,还请大家多多指教呀~ 欢迎大佬指正,一起学习,一起加油! 第一期--下拉菜单的实现文章目录 ...
jquery 下拉菜单 html,jQuery实现下拉菜单的实例代码
基本效果是这样的~~ * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; ...
jquery 实现下拉菜单
为什么80%的码农都做不了架构师?>>> 该文章属于原创:转载注明出处:http://www.pm-road.com/index.php/2014/12/09/276/ Jqu ...
Jquery实现下拉菜单滑动效果
关于下拉菜单的布局以及原始采用jquery的写法详见这篇博客:(1条消息) Jquery案例-下拉菜单_setTimeout()的博客-CSDN博客_jquery下拉菜单案例上面这篇博客的下拉菜单案 ...
jQuery获取下拉菜单列表的值
在表单提交的网页中,我们经常使用下拉菜单列表,这篇文章解释了如何获取下拉列表选择的值. 在jQuery中,我们通过使用.val()方法获得下拉列表的选定值. .val()方法主要用于获取表单元素的值, ...

jQuery实现下拉菜单

jQuery实现下拉菜单相关推荐

最新文章

热门文章