jquery 筛选选择器 下拉菜单
|
children(selector) |
$(“ul”).children(“li”) |
相当于$(“ul>li”)，子类选择器 |
|
find(selector) |
$(“ul”).find(“li”); |
相当于$(“ul li”),后代选择器 |
|
siblings(selector) |
$(“#first”).siblings(“li”); |
查找兄弟节点，不包括自己本身。 |
|
parent() |
$(“#first”).parent(); |
查找父亲 |
|
eq(index) |
$(“li”).eq(2); |
相当于$(“li:eq(2)”),index从0开始 |
|
next() |
$(“li”).next() |
找下一个兄弟 |
|
prev() |
$(“li”).prev() |
找上一次兄弟 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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(img/bg.jpg);
}
.wrap li {
background-image: url(img/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 class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script src="./jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
var $li=$('.wrap>ul>li');
$li.mouseenter(function(){
$(this).children('ul').show();
})
$li.mouseleave(function(){
$(this).children('ul').hide();
})
})
</script>
jquery 筛选选择器 下拉菜单相关推荐
- jquery实现多级下拉菜单
支持多种浏览器,体验效果: http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: 1 < ...
- 如何JQ将下拉列表的值传送给php,JQuery设置获取下拉菜单某个选项的值(比较全)...
JQuery获取和设置Select选项 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:sele ...
- php实现二级下拉菜单,jquery,_用jquery实现二级下拉菜单，jquery - phpStudy
用jquery实现二级下拉菜单 A B C D E F A B C D E F 这种下拉列表怎么做?当鼠标移动到li>a上,显示对应的div.而且鼠标能移动到div上,二级菜单不消失. 引用文字 ...
- antd选择器下拉菜单样式修改
// 选择器外部样式 .ant-select-selection {background-color: #002761 !important;color: rgba(255, 255, 255) !i ...
- jquery实现导航下拉菜单
jquery实现导航下拉菜单 原生的: 用layui 原生的: html <div id="my_menu" class="sdmenu">< ...
- html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下 代码如下: 下拉菜单 nav a{ text-de ...
- jquery二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- 基于jquery实现自定义下拉菜单（前端开发）
1.css代码 *,p,h1,h2,h3,h4,h5,h6{padding: 0;margin: 0;border: none;} h1,h2,h3,h4,h5,h6{font-size: 24px; ...
- javaweb和ajax使用查询出来的数据做下拉菜单_不会用Excel做数据筛选，老板叼的你没话说！...
很多人会做漂亮的表格,自信满满地给老板汇报,老板突然冒出一句话:你给我看下公司员工的学历分布情况. 这个问题能瞬间让很多人傻眼,自然少不了老板的一顿叼.其实数据筛选并不难,只要认真学,10分钟轻松搞定 ...
最新文章
- 水来了，数据中心如何做好防汛防洪措施？
- Outlook邮箱重新配置
- c++期末大作业_西城的家长注意了，北京小学校内期末考试越来越重要
- 如何修改Linux命令提示符
- WebStorm-2019.2.3 下载安装
- 流程 － 发布【敏捷方法之Scrum v0.2.pdf】
- C语言关键字必备练习题
- python极客项目编程pdf微盘下载_Python极客项目编程
- 数学建模1---基本方法和步骤
- 王晶：华为云OCR文字识别服务技术实践、底层框架及应用场景 | AI ProCon 2019
- 对于长沙互联网发展，一个外来两年Java程序员的所见所感所愿
- 解决VS 2017/2019社区版无法登陆的方法
- 数据库锁 与 事务隔离级别
- OWASP zap 代理设置
- Quartz在QRTZ_JOB_DETAILS表中存储了什么
- 批量替换ppt内容_在office宏中运行即可
- 换成Everyone还是访问被拒绝的解决办法
- Linux文件群发脚本
- 工控网络安全性测试解决方案
- 树莓派系列（一）-——————树莓派usb串口的使用