技术文章
当前位置:首页 > jQuery技术文章 > jQuery 实现左右两侧菜单添加、移除功能

jQuery实现左右两侧菜单添加、移除功能的方法总结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:133

这篇文章主要知识点是关于jquery、菜单添加、菜单移除、JQuery菜单效果的两个实例讲解(3) 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery EasyUI开发指南
  • 类型:jQuery大小:48.4 MB格式:PDF出版:人民邮电出版社发行部作者:王波
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

jQuery 实现左右两侧菜单添加、移除功能

效果图:

jQuery 实现左右两侧菜单添加、移除功能

JS代码   

 function toRight(l, r, v) {
   $("#" + l + " option:selected").appendTo("#" + r);
   $("#" + l + " option:selected").remove();
   var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
   $("#" + v).val(str);
  }
  function allToRight(l, r, v) {
   $("#" + l + " option").appendTo("#" + r);
   $("#" + l + " option").remove();
   var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
   $("#" + v).val(str);
  }
  function toLeft(l, r, v) {
   $("#" + r + " option:selected").appendTo("#" + l);
   $("#" + r + " option:selected").remove();
   var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
   $("#" + v).val(str);
  }
  function allToLeft(l, r, v) {
   $("#" + r + " option").appendTo("#" + l);
   $("#" + r + " option").remove();
   var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")
   $("#" + v).val(str);
  }

html代码           

<div class="easyui-layout" data-options="fit:true">
      <div data-options="region:'west',split:false" >
       <h3 >::已授权权限::</h3>
       <div data-options="region:'center'"  border="false">
        <select multiple="multiple" id="menuFunc" >
        </select>
        <input type="hidden" name="func" id="func" value="" />
       </div>
      </div>
      <div data-options="region:'east'" >
       <h3 >::未授权权限::</h3>
       <div data-options="region:'center'"  border="false">
        <select multiple="multiple" id="menuFuncBase" >
        </select>
       </div>
      </div>
      <div data-options="region:'center'" > 
       <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-primary button-rounded button-small" onclick="toLeft('menuFunc','menuFuncBase','func')" > < </a><br />
       <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-primary button-rounded button-small" onclick="allToLeft('menuFunc','menuFuncBase','func')" ><<</a><br />   
       <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-caution button-rounded button-small" onclick="toRight('menuFunc','menuFuncBase','func')" > > </a><br />
       <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button button-caution button-rounded button-small" onclick="allToRight('menuFunc','menuFuncBase','func')">>></a><br />  
      </div>
     </div>

总结

以上所述是小编给大家介绍的jQuery 实现左右两侧菜单添加、移除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

JQuery菜单效果的两个实例讲解(3)

最终要达到的效果是如图所示:

JQuery菜单效果的两个实例讲解(3)

当单击菜单项的时候,可以实现菜单的折叠与展开,这是我们在网页上经常看到的一个效果。在这里的实现主要应用是CSS控制样式然后配合jquery实现。
自己的感想:这里比如说绑定要跳转的页面,只是静态的绑定,不能动态的绑定,我在开发过程中用到的动态绑定是结合asp.net的treeview控件实现的。不知道大家还有没有更好的办法。
前台页面代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/menu.js" type="text/javascript"></script> 
 <link href="css/menu.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
  <ul> 
   <li class="main"> 
    <a href="#">菜单项1</a> 
    <ul> 
     <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> 
 </div> 
 </form> 
</body> 
</html> 

CSS(menu.css)

ul,li 
{ 
 list-style-type:none; 
 /*如果不加margin在搜狗浏览器中不能左对齐*/ 
 margin:0px;  
 padding:0px; 
 } 
.main 
{ 
 background-image: url("../images/title.gif"); 
 background-repeat:repeat-x; 
 width:100px; 
 } 
.main a 
{ 
 background-image:url("../images/collapsed.gif"); 
 background-repeat:no-repeat; 
 background-position:3px center; 
 text-decoration:none; 
 color:White; 
 /*下面是用来保证鼠标只要停留在li上就可以响应,也就相当于让li的响应区域扩充了*/ 
 display:block; 
 padding-left:20px; 
 padding-bottom:3px; 
 } 
li 
{ 
 background-color:#EEEEEE; 
 } 
.main li a 
{ 
 color:Black; 
 background-image:none; 
 } 

menu.js:

/// <reference path="jquery-1.9.1.min.js" /> 
$(document).ready(function () { 
 var main = $(".main>a"); 
 main.click(function () { 
  var ulNode = $(this).next("ul"); 
  //  if (ulNode.css("display") == "none") { 
  //   ulNode.css("display", "block"); 
  //  } 
  //  else { 
  //   ulNode.css("display", "none");    
  //  } 
 
  //百叶窗的效果 
  ulNode.slideToggle("normal"); 
 }); 
}); 

这个例子是上一个例子的延续,我们先来看一下最终我们要达到的效果:

JQuery菜单效果的两个实例讲解(3)

这次我们要实现的是下面的效果,当鼠标滑动到菜单项的时候,子菜单显示;当鼠标移开的时候,菜单收起。
在这里,我们还解决了在滑动门会有的问题,就是当鼠标快速滑动的时候,会不停地触发,这个问题。
 
页面的代码如下:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/menu.js" type="text/javascript"></script> 
 <link href="css/menu.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
  <ul> 
   <li class="main"> 
    <a href="#">菜单项1</a> 
    <ul> 
     <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> 
 </div> 
 
 <div > 
  <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> 
 </div> 
 </form> 
</body> 
</html> 

CSS(menu.css)

ul,li 
{ 
 list-style-type:none; 
 /*如果不加margin在搜狗浏览器中不能左对齐*/ 
 margin:0px;  
 padding:0px; 
 } 
.main,.hmain 
{ 
 background-image: url("../images/title.gif"); 
 background-repeat:repeat-x; 
 width:100px; 
 } 
.main a,.hmain a 
{ 
 background-image:url("../images/collapsed.gif"); 
 background-repeat:no-repeat; 
 background-position:3px center; 
 text-decoration:none; 
 color:White; 
 /*下面是用来保证鼠标只要停留在li上就可以响应,也就相当于让li的响应区域扩充了*/ 
 display:block; 
 padding-left:20px; 
 padding-bottom:3px; 
 } 
li 
{ 
 background-color:#EEEEEE; 
 } 
.main li a,.hmain li a 
{ 
 color:Black; 
 background-image:none; 
 } 
.main ul,.hmain ul 
{ 
 display:none; 
 } 
/*横向菜单的样式*/ 
.hmain 
{ 
 float:left; 
 } 

menu.js

/// <reference path="jquery-1.9.1.min.js" /> 
$(document).ready(function () { 
 var main = $(".main>a"); 
 main.click(function () { 
  var ulNode = $(this).next("ul"); 
  //  if (ulNode.css("display") == "none") { 
  //   ulNode.css("display", "block"); 
  //  } 
  //  else { 
  //   ulNode.css("display", "none");    
  //  } 
 
  //百叶窗的效果 
  ulNode.slideToggle("normal"); 
 }); 
 
 //现在的这个变量用来解决鼠标快速滑动问题clearInterval(setTimeoutId); nodeLi.children("ul").slideUp(); 
 var setTimeoutId; 
 $(".hmain").hover(function () { 
  var nodeLi = $(this); 
  setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300) 
 }, 
 //上面的函数是鼠标进入的操作,下面的操作是鼠标移出的操作。 
  function () { 
   //开始的时候,我在这里犯了一个错误,应该重新定义一下nodeLi 
   var nodeLi = $(this); 
   clearTimeout(setTimeoutId); 
   if (nodeLi.children("ul").length != 0) { 
    nodeLi.children("ul").slideUp(); 
   }; 
  }); 
}); 

以上两种菜单效果,大家有没有掌握,希望这篇文章可以帮助到大家。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jQuery与JSONP实现跨域访问的、 jQuery zepto.js简单实现tab切、 Jquery节点遍历next与nextAl、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jquery层次选择器的知识点总结

下一篇:jQuery实现点击旋转再点击恢复的实例代码

展开 +

收起 -

jQuery功能 相关电子书
学习笔记
网友NO.767457

jquery实现垂直和水平菜单导航栏

本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码 !DOCTYPE htmlhtml head meta charset="UTF-8" title竖直导航菜单/title link href="css/Vmenu.css" rel="stylesheet" / script src="js/jquery-2.1.4.min.js"/script script $(function(){ //垂直导航栏,点击下拉子菜单 $(".maina").click(function(){ $(this).next().slideToggle(500) .parent().siblings().find(".child").slideUp(500); }) //水平导航栏,鼠标经过下拉导航栏 $(".hmain").hover(function(){ $(this).find(".child").slideToggle(500) .parent().siblings().find(".child").slideUp(); }) }) /script /head body !--垂直导航栏-- ul class="content" li class="main"a href="#"菜单 1/a ul class="child" li菜单1.1/li li菜单1.2/li li菜单1.3/li /ul /li li class="main"a href="#"菜单 2/a ul class="child" li菜单2.1/li li菜单2.2/li li菜单2.3/li li菜单2.4/li /ul /li li class="main"a href="#"菜单 3/a ul class="child" li菜单3.1/li li菜单3.2/li ……

网友NO.251585

精心挑选的15个jQuery下拉菜单制作教程

今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作教程和示例。 Slide Down Box Menu with jQuery and CSS3 (演示|下载) Fancy Drop Down Menus Using CSS and JQuery. (演示|下载) Sliding Jquery Menu (演示|下载) Create Simple Dropdown Menu Using jQuery (演示|下载) Designing the Digg Header: How To nbsp;演示|下载) Easy to Style jQuery Drop Down Menu Tutorial (演示|下载) Professional Dropdown (演示|下载) A Different Top Navigation (演示|下载) jQuery Drop Down Menu for RSS Subscription Tutorial (演示|下载) Simple jQuery Dropdown Menu (演示|下载) Dropdown Nenu with Easing and Hoverintent Navidropdown (演示|下载) Solution For Very Long Dropdown Menus (演示|下载) Create The Fanciest Dropdown Menu (演示|下载) JQuery Drop Down Menu Tutorial (演示|下载) Superfish v1.4.8 – jQuery menu plugin (演示|下载) ……

网友NO.461180

jQuery实现的手风琴侧边菜单效果

本文实例讲述了jQuery实现的手风琴侧边菜单效果。分享给大家供大家参考,具体如下: 动手做了一个简单手风琴菜单,上图: 点击 B 可收缩 C 列表,点击 C 改变自身和父节点 B 的样式,悬浮时均有不同的样式改变。 先看页面代码,列表的嵌套: div id="menuDiv"ul id="menu"li class="parentLi"spanB/spanul class="childrenUl"li class="childrenLi"spanC/span/lili class="childrenLi"spanC/span/lili class="childrenLi"spanC/span/li/ul/lili class="parentLi"spanB/spanul class="childrenUl"li class="childrenLi"spanC/span/lili class="childrenLi"spanC/span/lili class="childrenLi"spanC/span/li/ul/lili class="parentLi"spanB/spanul class="childrenUl"li class="childrenLi"spanC/span/lili class="childrenLi"spanC/span/lili class="childrenLi"spanC/span/li/ul/li/ul/div css 代码,主要设置背景色和子菜单左边框的样式,设置悬浮和选中的样式,开始设置子菜单不显示(通过 js 设置点击之后再显……

网友NO.262646

jQuery实现可用于博客的动态滑动菜单完整实例

本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码。分享给大家供大家参考。具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"headtitlejQuery滑动菜单插件/titlescript type="text/javascript" src="jquery1.3.2.js"/scriptscript type="text/javascript" (function($){ $.fn.extend({ tagdrop: function(options) { var defaults = { tagPaddingTop: '90px', tagDefaultPaddingTop: '30px', bgColor: '#B1CCED', bgMoverColor: '#7FB0F0', textColor: '#e0e0e0', textDefaultColor: '#f……

网友NO.523694

jQuery实现Flash效果上下翻动的中英文导航菜单代码

本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码。分享给大家供大家参考。具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headtitlejQuery仿Flash鼠标感应式翻动的导航菜单/titlemeta http-equiv="content-type" content="text/html;charset=gb2312"style type="text/css"body{width:100%;height:100%;margin:0;padding:0;background:url(images/bg.gif) repeat-x top center;font-size:12px;color:#616161;}a,a:link,a:visited,a:active{color:#616161;text-decoration:none;}a:hover{text-decoration:underline;color:#710075;}#body{ width:100%;floa……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息