jquery二级下拉菜单（jQuery实现省份城市下拉菜单二级联动）

本文目录

• jQuery实现省份城市下拉菜单二级联动
• jquery如何实现二级菜单，如何修改JQ代码实现第一次点击自己显示子节点
• jquery实现二级菜单时，点击一级菜单，二级菜单滑出一下就又消失了
• jquery下拉菜单怎么做，一个简单的纯手写例子
• 如何用jquery选中select的第二个option
• 用jquery的ajax实现二级下拉菜单级联操作，一级的select id=industrial 二级的select id=profession
• Jquery做的下拉导航条，点击二级菜单不进行网页跳转
• 网页制作,慢慢下拉的菜单怎么做_网页设计下拉菜单怎么做

jQuery实现省份城市下拉菜单二级联动

加入初始化方法。这个初始化方法相当于主干，明白每一步该干嘛，然后在去把需要用到的方法写好就行

获取省份信息

把省份信息渲染到页面

根据省份去获取该省份的城市信息

获取城市信息的方法

这样所需要的方法就写好了

jquery如何实现二级菜单，如何修改JQ代码实现第一次点击自己显示子节点

            $(function () {
               $("#header》li").click(function(){
if( $(this).hasClass("flag") ){
$(this).removeClass("flag").height(20).find("ul").hide();
}else{
$("#header》li").removeClass("flag").height(20).find("ul").hide();
$(this).addClass("flag").height(100).find("ul").show();
}
               })
            })

jquery实现二级菜单时，点击一级菜单，二级菜单滑出一下就又消失了

jquery实现由一级导航菜单到二级滑动显示效果，并点击增加背景变化效果，代码挺简单的，但是也效果也很好，是非常实用的，也是很流行的菜单样式
html:
《div class="webSchoolL" id="webSchoolL"》
《ul class="leftTab" id="leftMeau"》
《li class="listL01"》1《/li》
《li》
《a href="#nogo"》2《/a》
《ul class="navUl"》
《li》《a href="#nogo"》22《/a》《/li》
《li》《a href="#nogo" class="curButA"》22《/a》《/li》
《li》《a href="#nogo"》22《/a》《/li》
《li》《a href="#nogo"》22《/a》《/li》
《/ul》
《/li》
《li》
《a href="#nogo"》3《/a》
《ul class="navUl"》
《li》《a href="#nogo"》33《/a》《/li》
《li》《a href="#nogo" class="curButA"》33《/a》《/li》
《li》《a href="#nogo"》33《/a》《/li》
《li》《a href="#nogo"》33《/a》《/li》
《/ul》
《/li》
《li》
《a href="#nogo"》4《/a》
《ul class="navUl"》
《li》《a href="#nogo"》44《/a》《/li》
《li》《a href="#nogo" class="curButA"》44《/a》《/li》
《li》《a href="#nogo"》44《/a》《/li》
《li》《a href="#nogo"》44《/a》《/li》
《/ul》
《/li》
《li》
《a href="#nogo"》5《/a》
《ul class="navUl"》
《li》《a href="#nogo"》55《/a》《/li》
《li》《a href="#nogo" class="curButA"》55《/a》《/li》
《li》《a href="#nogo"》55《/a》《/li》
《li》《a href="#nogo"》55《/a》《/li》
《/ul》
《/li》
《li》
《a href="#nogo" class="curButA"》6《/a》
《ul class="navUl" style="display:block;"》
《li》《a href="#nogo"》66《/a》《/li》
《li》《a href="#nogo" class="curButA"》66《/a》《/li》
《li》《a href="#nogo"》66《/a》《/li》
《li》《a href="#nogo"》66《/a》《/li》
《/ul》
《/li》
《li》
《a href="#nogo"》7《/a》
《ul class="navUl"》
《li》《a href="#nogo"》77《/a》《/li》
《li》《a href="#nogo" class="curButA"》77《/a》《/li》
《li》《a href="#nogo"》77《/a》《/li》
《li》《a href="#nogo"》77《/a》《/li》
《/ul》
《/li》
《li》
《a href="#nogo"》8《/a》
《ul class="navUl"》
《li》《a href="#nogo"》88《/a》《/li》
《li》《a href="#nogo" class="curButA"》88《/a》《/li》
《li》《a href="#nogo"》88《/a》《/li》
《li》《a href="#nogo"》88《/a》《/li》
《/ul》
《/li》
《li》
《a href="#nogo"》9《/a》
《ul class="navUl"》
《li》《a href="#nogo"》99《/a》《/li》
《li》《a href="#nogo" class="curButA"》99《/a》《/li》
《li》《a href="#nogo"》99《/a》《/li》
《li》《a href="#nogo"》99《/a》《/li》
《/ul》
《/li》
《/ul》
《/div》
2
css:
.webSchoolL{ width:200px; height:460px; background:#ececec;}
ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;}
ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;}
ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;}
ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;}
ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;}
ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;}
ul.leftTab li ul.navUl li { float:none;margin:0px;}
ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;}
ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}
3
js:$(function(){//导航特效
$("#leftMeau li:has(ul) a").click(function(){
$(this).addClass("curButA");
$(this).siblings().slideDown();
$(this).parent().siblings().find("a").removeClass("curButA");
$(this).parent().siblings().find("ul").slideUp();
});
})
4
效果如图所示
（此图看不出滑动效果，但实际效果确实是滑动效果）
END
注意事项
此方法简单灵活，拿来就可以应用，应用修改时请注意三种样式一起修改，避免代码无用
另外应用时记得把jquery类库引到页面中来，否则无效果

jquery下拉菜单怎么做，一个简单的纯手写例子

slideDown(),slideUp()

事件就用mouseenter mouseleave

《!DOCTYPE html》    
《html》    
《head》    
《meta charset="UTF-8"》    
《title》《/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(imgs/bg.jpg);    
}    
    
.wrap li{    
background-image: url(imgs/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》    
《script src="jq.js"》《/script》    
《script type="text/javascript"》    
       
   $(function(){    
       
//    分析思路:将鼠标到任何一个li上面 让对应的li里面的ul 显示  让其他的 li里面的ul隐藏    
       
//    1 给所有的.wrap》ul》li 添加注册鼠标移上事件 mouseover    
   $(".wrap》ul》li").mouseover(function(){    
   // 2 让它里面的直接子元素ul 去滑入    
   $(this).children("ul").stop().slideDown();    
   })    
   //2 给所有的.wrap》ul》li 添加注册鼠标移出事件 mouseout    
   $(".wrap》ul》li").mouseout(function(){    
   // 2 让它里面的直接子元素ul 去滑出    
   $(this).children("ul").stop().slideUp();    
   })    
   })    
       
《/script》    
《/head》    
《body》    
《div class="wrap"》    
《ul》    
《li》    
《a href="javascript:;"》一级菜单1《/a》    
《ul class="ul"》    
《li》    
《a href="javascript:;"》二级菜单11《/a》    
《/li》    
《li》    
《a href="javascript:;"》二级菜单12《/a》    
《/li》    
《li》    
《a href="javascript:;"》二级菜单13《/a》    
《/li》    
《/ul》    
《/li》    
《li》    
《a href="javascript:;"》一级菜单2《/a》    
《ul》    
《li》    
《a href="javascript:;"》二级菜单21《/a》    
《/li》    
《li》    
《a href="javascript:;"》二级菜单22《/a》    
《/li》    
《li》    
《a href="javascript:;"》二级菜单23《/a》    
《/li》    
《/ul》    
《/li》    
《li》    
《a href="javascript:;"》一级菜单3《/a》    
《ul》    
《li》    
《a href="javascript:;"》二级菜单31《/a》    
《/li》    
《li》    
《a href="javascript:;"》二级菜单32《/a》    
《/li》    
《li》    
《a href="javascript:;"》二级菜单33《/a》    
《/li》    
《/ul》    
《/li》    
《/ul》    
《/div》    
《/body》    
《/html》

如何用jquery选中select的第二个option

方法步骤如下：

1、首先打开计算机，然后打开前端软件，新建一个html文件。

2、在html代码页面新建标签，再在界面内输入如下代码：《input type="button" value="清空" onclick="clearSelect();"/》  《div id="test"》   《select name=""》    《option value="0"》请选择下拉菜单《/option》    《option value="1"》选择1《/option》    《option value="2"》选择2《/option》    《option value="3"》选择3《/option》   《/select》  《/div》。

3、然后再在界面内添加点击事件并输入如下代码： 《script》   function clearSelect(){    $("#test select").each(function(){     $(this).find("option").eq(0).prop("selected",true)    })   }  《/script》。

4、保存html文件后使用浏览器打开，会出现选择select下拉菜单。

5、然后选择第二个选项即可。

用jquery的ajax实现二级下拉菜单级联操作，一级的select id=industrial 二级的select id=profession

因为没有足够的信息，我说几个要点，你看看后台是不是这样的：
1.你使用的是 $.getJSON ，这个方法要求你的后台数据 Content-Type 是 text/json 或者 application/json 。如果不是这样的话，肯定不行的
2.回调函数中，myJSON 到底是什么类型，从你的代码来看，它是一个数组，这个数组中的每一个元素都是一个对象，该对象至少有两个属性：professionid 和 professionName .
确认你的数据信息吧，js代码没有什么问题，对了，你是手动触发第一个 select 的 change 事件的，看看你的第一个 select 是不是在触发之前已经有数据了，不然，第一次的触发是没有效果的

Jquery做的下拉导航条，点击二级菜单不进行网页跳转

二级菜单的a中··《a href="javascript:;"》xxx《/a》这样就不会跳转了·

网页制作,慢慢下拉的菜单怎么做_网页设计下拉菜单怎么做

这个效果你可以通过2中途径实现，使用框架或者是使用JavaScript代码。

1.使用框架：查找框架中的二级菜单组建，如Bootstrap中的导航条中的二级菜单。下面的是一个二级下拉菜单的例子