jquery下拉菜单,jquery完成下拉菜单的来得与遮盖

作者: 韦德国际1946国际网址  发布:2019-07-30

应用struts2和Ajax达成json对象的传导,然后完毕菜单的二级联合浮动

韦德国际1946国际网址 1

jquery 完毕下拉菜单,jquery下拉菜单

Jquery 是叁个轻量的框架,个人感到相当好用,明天就写多个特别简单的例证,完毕下拉菜单作用;

首先断定要在页面引用jquery.js  版本不限 ;

接下去把=====================html贴出来:

 

Html代码  韦德国际1946国际网址 2

  1. <div class=”header_menu”>  
  2.         <ul>  
  3.             <li class=”menuli” id=”xtgl_menu”>系统处理</li>  
  4.             <li class=”menuli” id=”ggsq_menu”>干线管道所勤</li>  
  5.             <li class=”menuli” id=”bhz_menu”>保护站</li>  
  6.             <li class=”menuli” id=”mcjy_menu”>木材核准</li>  
  7. jquery下拉菜单,jquery完成下拉菜单的来得与遮盖。            <li class=”menuli” id=”slgh_menu”>森林管理和爱抚</li>  
  8.         </ul>  
  9.     </div>  
  10.   
  11. <div class=”display movediv” id=”slgh_menu_div”>  
  12.     <ul>  
  13.         <li class=”redli”>出勤管理</li>  
  14.         <li class=”redli”>巡视管理</li>  
  15.         <li class=”redli”>现场取证</li>  
  16.         <li class=”redli”>难点处置</li>  
  17.     </ul>  
  18. </div>  
  19. <div class=”display movediv” id=”mcjy_menu_div”>  
  20.     <ul>  
  21.         <li class=”redli”>地点监测</li>  
  22.         <li class=”redli”>查证管理</li>  
  23.     </ul>  
  24. </div>  
  25. <div class=”display movediv” id=”bhz_menu_div”>  
  26.     <ul>  
  27.         <li class=”redli”>出勤管理</li>  
  28.         <li class=”redli”>监禁音讯</li>  
  29.     </ul>  
  30. </div>  
  31. <div class=”display movediv” id=”ggsq_menu_div”>  
  32.     <ul>  
  33.         <li class=”redli”>出勤管理</li>  
  34.         <li class=”redli”>禁锢音信</li>  
  35.     </ul>  
  36. 韦德国际1946国际网址,</div>  
  37. <div class=”display movediv” id=”xtgl_menu_div”>  
  38.     <ul>  
  39.         <li class=”redli”>权限处理</li>  
  40.         <li class=”redli”>设备管理</li>  
  41.     </ul>  
  42. </div>  

 

===========================css样式:

Css代码  韦德国际1946国际网址 3

  1. /**底部菜单**/  
  2. .header_menu{  
  3.     float:right;  
  4.     width: 50%;  
  5.     height: 100%;  
  6.     cursor: pointer;  
  7.       
  8. }  
  9.   
  10. .header_menu ul{  
  11.     list-style: none;  
  12.     height: 100%;  
  13.   
  14. }  
  15. .header_menu ul li{  
  16.     float: right;  
  17.     width: 20%;  
  18.     color:white;  
  19.     font-size:14px;  
  20.     padding-top: 55px;  
  21.     font-weight: bold;  
  22. }  
  23.   
  24. .display{  
  25.     display: none;  
  26. }  
  27. .display ul{  
  28.     list-style: none;  
  29.     width: 100px;  
  30. }  
  31. .display ul li{  
  32.     padding-top:10px;  
  33.     padding-bottom: 5px;  
  34.     padding-left:5px;  
  35.     cursor: pointer;  
  36.     font-size: 14px;  
  37. }  
  38. .movediv{  
  39.     position: fixed;  
  40.     left: 0px;  
  41.     top:0px;  
  42.     font-size: 14px;  
  43.     white;  
  44.     border:1px solid white;  
  45. }  
  46. .redcolor{  
  47.     #a0c9e6;  
  48. }  
  49.   
  50.    

 

=======================js脚本

Js代码  韦德国际1946国际网址 4

  1. $(function() {  
  2.     // 菜单绑定事件  
  3.     initMenuListener();  
  4.     // 下拉菜单绑定事件  
  5.     initSubMenuHover();  
  6.     // 下拉菜单颜色更改  
  7.     initSubMenuLiHover();  
  8. });  
  9.   
  10. /** 
  11.  * 底部菜单绑定滑过事件 
  12.  */  
  13. function initMenuListener() {  
  14.   
  15.     $(“.menuli”).hover(function() {  
  16.         var hideDivId = $(this).attr(“id”)   “_div”;  
  17.         // 获得菜单的岗位  
  18.         var left = $(this).offset().left;  
  19.         var top = $(this).offset().top;  
  20.         var height = $(this).outerHeight();//outerHeight是获得中度,包罗内边距,height是也是赢得中度,但是只囊括文件中度  
  21.   
  22.         $(“#”   hideDivId).show();  
  23.         $(“#”   hideDivId).css(“left”, left);  
  24.         $(“#”   hideDivId).css(“top”, top   height);  
  25.   
  26.     }, function() {  
  27.         // 将原来的菜单掩盖  
  28.         $(“.display”).hide();  
  29.     });  
  30. }  
  31. /** 
  32.  * 下拉菜单绑定事件 
  33.  */  
  34. function initSubMenuHover() {  
  35.     $(“.display”).hover(function() {  
  36.         $(this).show();  
  37.     }, function() {  
  38.         $(this).hide();  
  39.     });  
  40. }  
  41. /** 
  42.  *  下拉菜单改造颜色 
  43.  */  
  44. function initSubMenuLiHover() {  
  45.     $(“.redli”).hover(function() {  
  46.         $(this).addClass(“redcolor”);  
  47.     }, function() {  
  48.         $(this).removeClass(“redcolor”);  
  49.     });  
  50. }  

 

作用如下:

韦德国际1946国际网址 5

jquery实现下拉菜单

完成下拉菜单,jquery下拉菜单 Jquery 是二个轻量的框架,个人以为蛮好用,后天就写贰个极其轻易的事例,实现下拉菜单作用; 首先...

jQuery如何完结点击下拉菜单的遮掩和显示,jquery下拉菜单

jQuery如何实现点击下拉菜单的遮蔽和体现:
在相当多的网站皆有与此相类似的功效,那正是点击贰个父菜单就能议及展览示下拉子菜单,再点击父菜单,那么子菜单就能够掩饰,上面就大约介绍一下什么样兑现在那之中效用。这里只介绍怎么着运用jQuery达成此功用,临时不考虑功用的小家碧玉度,代码实比如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
*{ 
  margin:0px; 
  padding:0px; 
  font-size:14px; 
} 
ul{ 
  list-style:none; 
} 
.main .nav{ 
  width:100px; 
  margin:0px auto; 
  margin-top:3px; 
} 
.main .nav a{ 
  width:100px; 
  height:25px; 
  line-height:25px; 
  text-align:center; 
  text-decoration:none; 
  background-color:green; 
  display:block; 
} 
.main .nav .navcontent{ 
  display:none; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var navs=$(".nav"); 
  var navcontents=$(".navcontent"); 
  var navlen=navs.length; 

  $(".nav a").click(function(){ 
    if($(this).siblings().css("display")=="none"){ 
      $(this).siblings().css("display","block") 
    } 
    else{ 
      $(this).siblings().css("display","none")  
    }    
  })  
}) 
</script> 
</head> 
<body> 
<div> 
  <ul class="main"> 
   <li class="nav"> 
    <a href="#">蚂蚁部落</a> 
    <ul class="navcontent"> 
     <li>搜索优化</li> 
     <li>CSS专区</li> 
     <li>ASP专区</li> 
    </ul> 
   </li> 
   <li class="nav"> 
    <a href="#">前台专区</a> 
    <ul class="navcontent"> 
     <li>搜索优化</li> 
     <li>CSS专区</li> 
     <li>ASP专区</li> 
    </ul> 
   </li> 
   <li class="nav"> 
    <a href="#">后台专区</a> 
    <ul class="navcontent"> 
     <li>搜索优化</li> 
     <li>CSS专区</li> 
     <li>ASP专区</li> 
    </ul> 
   </li> 
  </ul> 
</div> 
</body> 
</html>

上述代码达成了点击导航栏主菜单实现二级菜单的掩盖域展现效果。以上代码并远远不够美观,只怕还会有比非常多更进一竿的地方,这里只是提供了一种达成此成效的观念。由于jQuery2.0不再帮衬toggle()函数,所以这里未有利用。

原稿地址是:

jQuery如何达成点击下拉菜单的掩饰和展现: 在重重的网址都有这么的效果,那正是...

下边是自个儿的 js文件原码:

复制代码 代码如下:

var mail={
//初始化
init:{
//早先化数据
initdata:{
did:'',
ttitle:'',
sendpassword:'',
description:''
},
//初阶化事件
initevent:{
DataEvent:function(){
$("#did").unbind("change");//获取一流菜单,绑定事件
$("#did").bind("change",function(){
//alert($(this).val());
mail.init.initdata.did=$(this).val();
//alert(mail.init.initdata.did);
mail.init.initevent.getuser();
});
},
<span style="color:#ff0000;">getuser:function(){
$.post("mailAction_showUsers?did=" mail.init.initdata.did,null,function(data){
var uidoption=$("#uid") ;//获取二级菜单
uidoption.empty();//将列表清空
for(var i=0;i<data.users.length;i ){
//向里面填充option,通过巡回
uidoption.append("<option value=" data.users[i].uid " >" data.users[i].username "</option>" );
}
});</span>
},
submitCheck:function(){
$("#send").unbind("click");
$("#send").bind("click",function(){
mail.init.initdata.description=$("input[type='textarea']").text();
mail.init.initdata.sendpassword=$("input[name='sendpassword']").val();
mail.init.initdata.ttitle=$("input[name='ttitle']").val();

if(mail.init.initdata.sendpassword==""){
alert("请输入密码!");
return false;
}
else if(mail.init.initdata.ttitle==""){
alert("请输入核心!");
return false ;
}
else if(mail.init.initdata.description==""){
alert("请输入内容!");
return false;
}
else
return true;
});
}
}
}
}

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:jquery下拉菜单,jquery完成下拉菜单的来得与遮盖

关键词: JavaScript 日记本