横向下拉二级菜单Jquery代码
jQuery实现二级下拉菜单效果
jQuery实现⼆级下拉菜单效果⼤家都知道jQuery是⼀个框架，它对JS进⾏了封装，使其更⽅便使⽤。
前⾯两篇博⽂分别是⽤CSS样式和JS实现的，那么这篇就⽤jQuery来实现⼆级下拉式菜单。
使⽤JQuery实现需要⽤到的知识有：1)使⽤$(function(){...})获取到想要作⽤的HTML元素。
2)通过使⽤children()⽅法寻找⼦元素。
3)通过使⽤show()⽅法来显⽰HTML元素。
4)通过使⽤hide()⽅法来隐藏HTML元素。
5)jQuery库引⽤⽅法:先来看看效果图：最后我们来看看代码的情况，和前⾯的区别不⼤：HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>下拉菜单</title><link rel="stylesheet" type="text/css" href="style.css" /><!--引⽤百度服务器的jQuery库--><script src="/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="script.js"></script></head><body><div id="nav" class="nav"><ul><li><a href="#">⽹站⾸页</a></li><li class="navmenu"><a href="#">课程⼤厅</a><ul><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li><li><a href="#">Ajax</a></li></ul></li><li class="navmenu"><a href="#">学习中⼼</a><ul><li><a href="#">视频学习</a></li><li><a href="#">案例学习</a></li><li><a href="#">交流平台</a></li></ul></li><li><a href="#">经典案例</a></li><li><a href="#">关于我们</a></li></ul></div></body></html>CSS样式表外部style.css⽂件代码：/*CSS全局设置*/*{margin:0;padding:0;}.nav{background-color:#EEEEEE;height:40px;width:450px;margin:0 auto;}ul{list-style:none;}ul li{float:left;line-height:40px;text-align:center;}a{text-decoration:none;color:#000000;display:block;width:90px;height:40px;}a:hover{background-color:#666666;color:#FFFFFF;}ul li ul li{float:none;background-color:#EEEEEE;}ul li ul{display:none;}/*为了兼容IE7写的CSS样式，但是必须写在a:hover前⾯*/ul li ul li a:link,ul li ul li a:visited{background-color:#EEEEEE;}ul li ul li a:hover{background-color:#009933;}JS脚本外部script,js⽂件代码：$(function(){$(".navmenu").mouseover(function(){$(this).children("ul").show();})$(".navmenu").mouseout(function(){$(this).children("ul").hide();})})希望本⽂所述对⼤家学习jquery程序设计有所帮助。
第9章 jQuery中的事件-任务3 制作横向菜单效果
合成事件hover
语法：$(selector). hover(enter,leave)
作用：用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函 数,当光标移出这个元素时,触发指定的第二个函数 示例 使用hover合成事件改善下例
特殊事件one
语法：$(selector). one(event,[data],function)
任务描述
在页面顶部导航菜单，当光标移入办公时，办公的二级菜单显示，当鼠标 移出时，办公二级菜单内容隐藏。类似的，鼠标移入“王丽”和“更多 “时，显示相应二级菜单内容，移出时隐藏二级菜单内容。
演示任务3：横向菜单效果
任务分析
1.为“办公”、“王丽”和“更多”绑定mouseover或mouseenter事件，鼠标 移入时，将层内容显示。 2.鼠标移出时绑定mouseout或mouseleave事件，将刚显示的内容隐藏。 3.使用jQuery封装的合成事件实现上面两步。
拓展:模拟操作trigger
语法：$(selector). trigger(模拟事件)
作用：触发被选元素的指定ick(function(){ $(“#btn”).trigger(“click”);//模拟操作触发的#btn的click事件.}) 此时，单击id为pos的对象，将触发id为btn的单击事件
练一练
练习 根据所给素材，应用CSS样式制作如图3所示页面，使用jQuery的hover事件实现横
向导航菜单效果。
实现思路
（1）使用hover实现导航菜单。 （2）设置hover第一个函数为鼠标移入时显示菜单，第二函数为鼠标移出隐藏菜单。
总结
➢使用bind方法可以为元素绑定事件，使用unbind方法可以删除事件。 ➢JQuery中的event对象封装了很多非常好用的属性和方法。 ➢如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，
（实用篇）jQuery+PHP+MySQL实现二级联动下拉菜单
（实⽤篇）jQuery+PHP+MySQL实现⼆级联动下拉菜单⼆级联动下拉菜单选择应⽤在在很多地⽅，⽐如说省市下拉联动，商品⼤⼩类下拉选择联动。
本⽂将通过实例讲解使⽤jQuery+PHP+MySQL来实现⼤⼩分类⼆级下拉联动效果。
先看下效果实现的效果就是当选择⼤类时，⼩类下拉框⾥的选项内容也随着改变。
实现原理：根据⼤类的值，通过jQuery把值传给后台PHP处理，PHP通过查询MySQl数据库，得到相应的⼩类，并返回JSON数据给前端处理。
XHTML⾸先我们要建⽴两个下拉选择框，第⼀个是⼤类，第⼆个是⼩类。
⼤类的值可以是预先写好，也可以是从数据库读取。
<label>⼤类：</label><select name="bigname" id="bigname"><option value="1">前端技术</option><option value="2">程序开发</option><option value="3">数据库</option></select><label>⼩类：</label><select name="smallname" id="smallname"></select>jQuery先写⼀个函数，获取⼤类选择框的值，并通过$.getJSON⽅法传递给后台server.php，读取后台返回的JSON数据，并通过$.each⽅法遍历JSON数据，将对应的值写⼊⼀个option字符串，最后将option追加到⼩类⾥。
function getSelectVal(){$.getJSON("server.php",{bigname:$("#bigname").val()},function(json){var smallname = $("#smallname");$("option",smallname).remove(); //清空原有的选项$.each(json,function(index,array){var option = "<option value='"+array['id']+"'>"+array['title']+"</option>";smallname.append(option);});});}注意，在遍历JSON数据追加之前⼀定要先将⼩类⾥的原有的项清空。
jQuery下拉列表二级联动插件
jQuery下拉列表⼆级联动插件jQuery⼆级联动插件：jQuery.selected⼀个页⾯可以引⽤多个联动效果，使⽤⽅法：配置js：1var defaults = {2 NextSelId: '#Select2',3 SelTextId: '#Text1',4 Separator: '--',5 SelStrSet: [6 { name: '请选择', subname: '请选择'},7 { name: '★⾼起本★', subname: '计算机科学与技术|汉语⾔⽂学' },8 { name: '★⾼起专★', subname: '语⽂教育|⽂秘|学前教育|旅游管理|法律事务|经济管理|会计电算化|电⼦商务|计算机信息管理|软件⼯程|机电⼀体化|精细化学品⽣产技术|机械制造设计及⾃动化|播⾳与主持|艺术设计|书法⽅向艺术设计' },9 { name: '★专升本★', subname: '思想政治教育|汉语⾔⽂学|英语|数学与应⽤数学|电⼦信息⼯程|计算机科学与技术|会计学|公共事业管理|旅游管理|体育教育|⾳乐学|艺术设计|书法⽅向艺术设计'}]10 }1112var defaults2 = {13 NextSelId: '#Select4',14 SelTextId: '#Text2',15 Separator: '★',16 SelStrSet: [17 { name: '请选择', subname: '请选择'},18 { name: '北京', subname: '北京1|北京2' },19 { name: '上海', subname: '上海1|上海2|上海3|上海4' },20 { name: '天津', subname: '天津'}]21 } 配置说明： NextSelId：需要联动加载的下拉列表 ID SelTextId：显⽰选择选项的⽂本框 ID Separator：⼀级菜单、⼆级菜单分割字符串 SelStrSet：配置下拉选项 [{ name: '请选择', subname: '请选择'}] name：⼀级下拉选项；subname：⼆级下拉选项，多个⽤“|”分开；html页⾯：1<body>2<script type="text/javascript">3 $(function () {4 $('#Select1').selected(defaults);5 $('#Select3').selected(defaults2);67 });8</script>9<select id="Select1">10</select>11<select id="Select2">12</select>13<input id="Text1" type="text"/>14<br />15<select id="Select3">16</select>17<select id="Select4">18</select>19<input id="Text2" type="text"/>20</body>有好的建议请留⾔评论！。
Jquery实现纵向横向菜单
Jquery实现纵向横向菜单第⼀个菜单实现的是点击菜单项显⽰相应的⼦菜单项，三⾓变为向下的三⾓。
下⾯的菜单⿏标移动到菜单项显⽰对应的⼦菜单项，⿏标移开⼦菜单消失。
下⾯介绍它的代码部分：html代码：head代码部分添加标题及引⽤：<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>JQuery实战-菜单效果</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/menu.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/menu.js"></script></head></span>body部分编辑菜单项内容，通过嵌套的ul和li来表⽰，菜单最外层为ul，⼀层每个主菜单放在⼀个li中。
如果有⼦菜单，在这个主菜单的li中建⽴新的ul，再依次嵌套就可以构建多层的菜单。
<span style="font-family:KaiTi_GB2312;font-size:18px;"><body><ul><li class="main"><a href="#">菜单项1</a><ul style="display:none;"><li><a href="#">⼦菜单项11</a></li><li><a href="#">⼦菜单项12</a></li></ul></li><li class="main"><a href="#">菜单项2</a><ul><li><a href="#">⼦菜单项21</a></li><li><a href="#">⼦菜单项22</a></li></ul></li><li class="main"><a href="#">菜单项3</a><ul><li><a href="#">⼦菜单项31</a></li><li><a href="#">⼦菜单项32</a></li></ul></li></ul><br/><ul><li class="hmain"><a href="#">菜单项1</a><ul><li><a href="#">⼦菜单项11</a></li><li><a href="#">⼦菜单项12</a></li></ul></li><li class="hmain"><a href="#">菜单项2</a><ul><li><a href="#">⼦菜单项21</a></li><li><a href="#">⼦菜单项22</a></li></ul></li><li class="hmain"><a href="#">菜单项3</a><ul><li><a href="#">⼦菜单项31</a></li><li><a href="#">⼦菜单项32</a></li></ul></li></ul></body></span>css代码部分1.浏览器中的ul和li元素默认情况下⽂字前都有圆点标识符，li元素会有缩进2.list-style属性值为none,可清除ul和li前⾯的⼩圆点。
jquery下拉菜单
jquery下拉菜单
下拉菜单或者导航是我们在⽹站开发中不可或缺的⽹站元素之⼀，使⽤jQuery可以制作出简洁易⽤、美观⼤⽅的下拉菜单或者导航效果。
下⾯展⽰的12款利⽤jQuery实现的下拉菜单即导航效果整理⾃前端⼤⽜爱好公众号的美⽂推送，⽤于分享和收藏。
1，全屏⼤幅下拉菜单导航
2，电商⽹站分类导航菜单特效
3，⿊⾊⽹站导航下拉菜单
4，动画下拉导航菜单
5，多条件筛选下拉选择框
6，hover响应下拉导航菜单栏
7，input⽂本框点击下拉选择
8，响应式下拉导航菜单
9，适应移动端选择框下拉列表
10，⿏标经过⼆级菜单下拉
11，垂直⼿风琴菜单列表
12，左侧下拉菜单
代码下载：
以上效果整理前端⼤⽜爱好者，如有侵权，请联系删除。
jq实现页面无限下拉功能的方法
jq实现页面无限下拉功能的方法（原创实用版2篇）目录（篇1）I.页面无限下拉功能的概念和意义II.jq实现页面无限下拉功能的方法III.总结正文（篇1）一、页面无限下拉功能的概念和意义页面无限下拉功能是指当用户滚动到页面底部时，可以继续向下滚动并加载更多内容，以实现无缝的浏览体验。
这种功能可以提高用户体验，使网站更加友好和易于使用。
二、jq实现页面无限下拉功能的方法1.使用CSS实现无限下拉功能使用CSS的`overflow`属性可以控制元素是否溢出，将其设置为`auto`可以触发无限下拉功能。
然后，使用JavaScript监听滚动事件，当滚动到页面底部时，向服务器请求更多内容并更新页面。
2.使用Ajax实现无限下拉功能Ajax是一种使用XMLHttpRequest对象来异步地向服务器发送请求的技术。
使用Ajax可以实现页面无刷新加载数据，从而实现无限下拉功能。
当用户滚动到页面底部时，向服务器发送请求并获取更多数据，然后更新页面。
3.使用jQuery插件实现无限下拉功能jQuery是一种流行的JavaScript库，它简化了JavaScript编程。
许多插件可以帮助开发者快速实现无限下拉功能，例如`loadmore`插件。
使用这些插件可以大大减少开发时间和工作量。
三、总结jq实现页面无限下拉功能的方法有很多种，包括使用CSS、Ajax和jQuery插件等。
无论使用哪种方法，都可以提高用户体验和网站性能。
目录（篇2）1.页面无限下拉功能的需求分析2.jq实现页面无限下拉功能的实现方法3.总结和展望正文（篇2）一、页面无限下拉功能的需求分析页面无限下拉功能是指在页面加载时，初始显示部分内容，通过下拉页面，动态加载更多内容的功能。
这种功能在很多场景下都有应用，例如新闻滚动、商品列表等。
二、jq实现页面无限下拉功能的实现方法1.使用jq的滚动事件监听器，当页面滚动一定距离时，触发一个函数。
2.在这个函数中，使用ajax请求获取更多数据，并将数据动态添加到页面中。
jQuery实现下拉加载功能实例代码
本文通过一段实例代码给大家介绍jquery实现下拉加载功能，代码简单易懂，需要的朋友参考下吧直接给大家贴代码了，具体代码如下所示：<script>var str = '';if(page=="") page=1;var stop=true;//触发开关，防止多次调用事件$(window).scroll( function(event){//当内容滚动到底部时加载新的内容100当距离最底部100个像素时开始加载.if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {//if(stop==true){//stop=false;//var canshu="page/"+page+";var url = "";var parm = {'page':page};page=page+1;//当前要加载的页码//加载提示信息$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>");$.post(url,parm,function(data){if( data.count == 0 ) {$('.prolist-abtn').html('已全部加载完');return;}$.each(eval(data), function(data, val) {var url1 = "";$(".ajaxtips").hide();str = '<div class="content" id="showdiv">';str +='<div class="cont clearfix">';str +='<a href="url"><div class="cont_img fl">';str +='<img src='+val.imgurl+' alt="" /></div>';str += '<div class="cont_list fl"><p>'+val.sceneryname+'</p><ul class="cont_list fl">';str += '<li class="cont_list2"><span>￥</span>';str +='<strong>'+val.sellerprice+'</strong>起<i>￥'+val.sellerprice+'</i></li>';str +='</ul></div></a></div></div>';$("#showdiv").append(str);//把新的内容加载到内容的后面});stop=true;},'JSON')}});</script>以上代码是小编给大家分享的jQuery实现下拉加载功能实例代码，希望对大家有所帮助！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
div.nav{
line-height: 36px;
background-color: #333;
height:36px;
width:960px;
margin-right:auto;
margin-left:auto;
color:#fff;
z-index:-1;
}
div.nav a{
color:#999;
text-decoration: none;
display:block;
float:left;
text-align: center;
padding-right:5px;
padding-left:5px;
width:100px;
}
div.navul li ul li{
line-height:28px;
height:28px;
}
div.navul{
float:left;
list-style-type: none;
z-index:20;
}
div.navul li{
float:left;
margin-bottom: 5px;
/*min-width: 65px;*/
width:110px;
}
div.navul li a:hover{
color:#f90;
background-color: #ccc;
padding-right: 5px;
padding-left:5px;
}
.on{
background-color: #666;
}
div.navul li ul{
display: none;
}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="menulist">
<li id="n0"><a href="default.htm">首页</a></li>
<li ><a href="#">新闻</a>
<ul>
<li><a href="#">in</a></li>
<li><a href="#">out</a></li>
<li><a href="#">news</a></li>
</ul>
</li>
<li ><a href="#">信息</a>
<ul>
<li><a href="#">info</a></li>
<li><a href="#">education</a></li>
<li><a href="#">mobile</a></li>
</ul>
</li>
<li ><a href="#">社区</a>
<ul>
<li><a href="#">taobao</a></li>
<li><a href="#">amazon</a></li>
<li><a href="#">jd</a></li>
</ul>
</li>
</ul>
</div>
</div>
<scriptsrc="js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
menu();
});
function menu(){
$(".nav>ul>li:not(#n0)").hover(function(){
$(".nav>ul>li:not(#n0)").removeClass("on");
$(this).addClass("on");
$(this).find("ul").show();
},function(){
$(this).removeClass("on");
$(this).find("ul").hide();
})
}
</script>
</body>
</html>。