先上图,说场景

假设默认选中的是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. js对已经对象类型进行类型辨别

    typeof() Object.prototype.toString.call(data)

  2. java设计模式之适配器模式

    说到适配器,我们可能会想到电脑的适配器,没错,其实作用是一样的,电脑的适配器在中国可以使用,在美国也可以使用,它的主要作用是在新接口和老接口之间进行适配..这就是一个适配的过程,适配器模式的类图如下: ...

  3. 第9章 用内核对象进行线程同步(3)_信号量(semaphore)、互斥对象(mutex)

    9.5 信号量内核对象(Semaphore) (1)信号量的组成 ①计数器:该内核对象被使用的次数 ②最大资源数量:标识信号量可以控制的最大资源数量(带符号的32位) ③当前资源数量:标识当前可用资源 ...

  4. C#类型转换运算符之 explicit implicit

    类型转换运算符 explicit和implicit用于声明用户定义的类型转换运算符,如果可以确保转换过程不会造成数据丢失,则可使用这两个关键字在用户定义的类型和其他类型之间进行转换. explicit ...

  5. UI的重用性

    UI抽取思路 一款手机游戏中UI有几十个到上百个不等,如果一个一个做这些UI,无疑会花费很多时间. 近期我们的游戏UI已经是第N次改版了,经过这N多次的修改,我总结了UI其实有很多的共性(就是相同性) ...

  6. jmeter beanshell内容

    byte [] sampledata = ctx.getPreviousResult().getResponseData(); String  smapledatastring = new Strin ...

  7. JavaScript数组定义

    数组有四种定义的方式 使用构造函数: var a = new Array(); var b = new Array(8); var c = new Array("first", & ...

  8. mui禁止横屏显示,仅支持竖屏显示

    mui.plusReady(function () { plus.screen.lockOrientation("portrait-primary"); });

  9. HTML 学习笔记 CSS样式(框模型)

    CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述

  10. iOS多线程开发资源抢夺和线程间的通讯问题

    说到多线程就不得不提多线程中的锁机制,多线程操作过程中往往多个线程是并发执行的,同一个资源可能被多个线程同时访问,造成资源抢夺,这个过程中如果没有锁机制往往会造成重大问题.举例来说,每年春节都是一票难 ...