先上图,说场景

假设默认选中的是item1,我现在选中item3了,有时候需要对item1做一些别的处理。常见的做法是,切换选中状态前找到当前选中(item1),或者每次选中后选中的项记录在中间变量。

这样处理没任何问题,不过心理总有点怪怪的,最好代码分离,就像这样:

$(this).unselect(fn_unselect).select(fn_select),具体代码是这样的:

$(function ()
{
$.$ul('#menu').children().each(function ()
{ $(this).unselect(function ()
{
$(this).removeClass('selected'); }).select(function ()
{
            $(this).addClass('selected')
          }); 
        });
      });

用到的扩展函数:

 $.fn.extend({
unselect: function (callback)
{
//this指unselect的项
if (this[0].tagName === 'LI' && typeof callback === 'function')
{
this.data('unselect', callback);
return this;
}
},
select: function (callback)
{
//this指select的项
if (this[0].tagName === 'LI' && typeof callback === 'function')
{
this.data('select', callback);
return this;
}
}
});
$.extend({
$ul: function (selector)
{
var res = $(selector);
if (res[0].tagName !== 'UL') return undefined;
res.children().each(function ()
{
//实际上这应该是clickAfter事件,此处用setTimeout(fn,delay);代替。即使不用此函数也会先于自定义的click事件
$(this).live('click', function ()
{
              var that = this;
var clickAfter=function ()
{
//处理unselect
var unselecting =  $(that).siblings('.selected');
unselecting.data('unselect').call(unselecting); //处理select
var selecting=$(that)
selecting.data('select').call(selecting); };
setTimeout(clickAfter, 1);//确保在click后执行
});
});
return res;
}
});

给菜单加个优雅的unselect事件的更多相关文章

  1. React中如何优雅的捕捉事件错误

    React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...

  2. [Ext.Net] 1.x GridPanel列数过多给Menu菜单加滚动条

    转自:http://www.ext.net.cn/thread-1944-1-2.html 当GirdPanel列数过多,查看列的显示隐藏时会出现下面下面情况,有部分超出了界面被遮罩住了   要解决这 ...

  3. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...

  4. Linux为grub菜单加密码

    为grub菜单加密码 加入密码后,再次进入单用户或者给下次管理grub需要输入密码 加密操作 /sbin/grub-md5-crypt # 之后输入2次密码会生成加密后字符串 编辑grub加载文件 v ...

  5. AutoCAD菜单加载失败 找不到文件mnc 怎么办

    菜单加载失败,找不到文件 SWFILECONV(mnu/mns/mnc)   找到CAD安装目录下的swfileconv.arx文件,用记事本打开,清空内容,然后保存即可.  

  6. abp web.mvc项目中的菜单加载机制

    abp中的菜单加载机制 在abp中菜单的定义与我们传统写的框架不一样,它是在编写代码的时候配置,而我们一般写的通用权限管理系统中,是后期在后台界面中添加的.这一点有很大不同.abp关于菜单的定义及管理 ...

  7. angularjs数据异步加载时的绑定事件

    // 顶级菜单项的鼠标移入和移出操作 $(document).on({ mouseover: function () { ; ; if (top + $(this).children('ul').ou ...

  8. ASP.NET Repeater嵌套Repeater实现菜单加载

    在KS系统中要实现从数据库中读取界面权限文件实现菜单.界面的动态加载. 效果图: ASP.NET界面代码 <div id="menu-container"> <a ...

  9. (js有关图片加载问题)dom加载完和onload事件

    引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...

随机推荐

  1. SmartPointer Smar指针

    #include<iostream> using namespace std; // private class for use by HasPtr only class U_Ptr { ...

  2. 广州APP开发外包公司哪家比较好?广州达到信息技术有限公司技术到底怎么样?

        广州APP开发公司哪家比较好,广州手机APP软件开发公司广州达到信息表示:用户的刚性需求是公司使用手机APP软件盈利的根本前提和基础,所以开发一款手机APP应用时必须从客户的角度来思考.因此公 ...

  3. C++11 之 scoped enum

      C++11 枚举类型是“域化的” (scoped enum),相比 C++98 枚举类型的“非域化” (unscoped enum),具有如下优点: 1  命名空间污染  一般来说,声明在花括号内 ...

  4. 移动测试会Ebay沙龙PPT

    Bill Liu --如何让你的测试更敏捷ebay沈斌峰 --Mobile Automation TestingJason Woo -- Full Stack Testing http://teste ...

  5. mysql中char与varchar的区别分析

    char 固定长度,所以在处理速度上要比varchar快速很多,但是对费存储空间,所以对存储不大,但在速度上有要求的可以使用char类型,反之可以用varchar类型来实例 建意: myisam 存储 ...

  6. MYSQL数据库的操作

    Mysql的连接方式: 1.原生函数:mysql_connect($server,$username,$password);   //打开一个到Mysql服务器的连接 mysql_select_db( ...

  7. Javascript备忘复习笔记2

    一.函数与形参 1.函数 function abs(x) { if (x >= 0) { return x; } else { return -x; } } alert(abs(-10)); 2 ...

  8. AFNetworking 与 UIKit+AFNetworking 详解

    资料来源 : http://github.ibireme.com/github/list/ios GitHub : 链接地址 简介 : A delightful iOS and OS X networ ...

  9. Java 日志性能优化

    1. 选择合理的日志级别.合理控制日志内容 2. 控制日志的输出内容和格式 logger.debug("Entry number: " + i + " is " ...

  10. 使用JavaScript打印网页指定DIV区域

    JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...