先上图,说场景

假设默认选中的是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. 深入理解TCP(一)

    TCP是面向连接的传输层层协议,可以为应用层提供可靠的数据传输服务.所谓的面向连接并不是真正意思上的连接,只不过是在发送数据之前,首先得相互握手,也就是说接收方知道你要发数据给它了.而UDP是面向无连 ...

  2. Rename in Batch [Python]

    #!/usr/bin/python2.7 # Program: # Rename files in current folder in batch. # Date: # 2016-04-17 # Us ...

  3. windows 7 语言切换 Vistalizator

    Try Vistalizator - this tool allows you to change display language in Windows editions other than (o ...

  4. Docker Network containers

    Network containers Estimated reading time: 5 minutes If you are working your way through the user gu ...

  5. BestCoder Round #87 1002 Square Distance[DP 打印方案]

    Square Distance  Accepts: 73  Submissions: 598  Time Limit: 4000/2000 MS (Java/Others)  Memory Limit ...

  6. 洛谷⑨月月赛Round2 P3393逃离僵尸岛[最短路]

    题目描述 小a住的国家被僵尸侵略了!小a打算逃离到该国唯一的国际空港逃出这个国家. 该国有N个城市,城市之间有道路相连.一共有M条双向道路.保证没有自环和重边. K个城市已经被僵尸控制了,如果贸然闯入 ...

  7. AC日记——与7无关的数 openjudge 1.5 39

    39:与7无关的数 总时间限制:  1000ms 内存限制:  65536kB 描述 一个正整数,如果它能被7整除,或者它的十进制表示法中某一位上的数字为7,则称其为与7相关的数.现求所有小于等于n( ...

  8. 关于Ajax中http协议

    关于ajaxajax是异步的JavaScript和XML,优点是无刷新的与后天通信并获取数据,只更改页面中需要更改的部分,而不是刷新整个页面,减少无意义的数据传输,提高了效率和用户体验 1.协议和HT ...

  9. net面试 ASP.NET页面传值的各种方法和分析 (copy)

    Web页面是无状态的, 服务器对每一次请求都认为来自不同用户,因此,变量的状态在连续对同一页面的多次请求之间或在页面跳转时不会被保留.在用ASP.NET 设计开发一个Web系统时, 遇到一个重要的问题 ...

  10. EF的入门使用 (电影管理)

    控制器代码: public class HomeController : Controller { private NewDBContext ndc = new NewDBContext(); pub ...