<div class="fl left"  id="nav" style="width:18%" >
                <div class="leftnav">商品分类</div>
                <ul class="sui-nav nav-list nav-large mt10">
                   <li class="nav-header" >
                       <i class="sui-icon icon-touch-folder-right-sign"></i>
                       一级菜单
                       <ul class="sui-nav nav-list nav-large" style="display: none">
                           <li class="nav-header">
                               <i class="sui-icon icon-touch-folder-right-sign"></i>
                               二级菜单
                               <ul class="sui-nav nav-list nav-large" style="display: none">
                                   <li class="nav-header">
                                       <i class="sui-icon icon-touch-folder-right-sign"></i>
                                       三级菜单
                                   </li>
                                   <li style="display: none"><a>菜单子项 </a></li>
                               </ul>
                           </li>
                           <li style="display: none"><a>菜单子项 </a></li>
                       </ul>
                    </li>
                </ul>
            </div> $(".nav-header").toggle(
function (event) {
if($(event.target).is("a")){
return;
} event.stopPropagation();
$(this).find("ul:first").show();
$(this).find("i:first").removeClass("icon-touch-folder-right-sign").addClass("icon-touch-folder-right");
$(this).siblings().show();
},
function (event) { if($(event.target).is("a")){
return;
}
event.stopPropagation();
$(this).find("ul:first").hide();
$(this).find("i:first").removeClass("icon-touch-folder-right").addClass("icon-touch-folder-right-sign");
$(this).siblings().hide();
})

jquery tree的更多相关文章

  1. 10+ 最流行的 jQuery Tree 菜单插件

    jstree – jQuery Tree Plugin With HTML & JSON Data jstree is a lightweight and flexible jQuery pl ...

  2. 树型权限管理插件:jQuery Tree Multiselect详细使用指南

    1.认识jQuery Tree Multiselect 这个插件允许用户以树型的形式来呈现列表复选框的选择.多用于权限管理中用于分配不同的权限.使用文档,请参考:     https://github ...

  3. JavaScript-Tool:jquery.tree.js-un

    ylbtech-JavaScript-Tool:jquery.tree.js 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.jst ...

  4. ztree插件(JQuery Tree)

    本次使用的ztree插件,基本上所有的需求都能满足,可谓功能强大. * [http://www.ztree.me/v3/api.php zTree v3.0 API 文档] * [http://www ...

  5. salesforce 零基础学习(七十)使用jquery tree实现树形结构模式

    项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...

  6. jquery tree events didn't work

    You should put your js in $(document).ready() like following. Hope this will help you. $(document).r ...

  7. JQuery Tree插件

    转载这个,这个非常的全,有时间可以去学习学习:http://ztreeapi.iteye.com/ http://ztreeapi.iteye.com/blog/2028608

  8. 递归查询构造jquery tree

    1 现在有如下的一张表: CREATE TABLE [dbo].[ThemeCategory] ( [ID] [int] NOT NULL, [ThemeCategoryName] [nvarchar ...

  9. JQuery Tree插件——zTree

    Demo:点击下载 zTree 在线操作演示:http://www.ztree.me/v3/demo.php#_101

随机推荐

  1. 为什么ReactiveCocoa中推荐使用RACSignal来做信号处理而不是RACSubject

    原文解释在这里http://cocoadocs.org/docsets/ReactiveCocoa/0.6.0/ 在标题Creating hot subscribables 底下 先贴原文: The ...

  2. 关于Http状态码

    Http状态码表示Http协议所返回的响应的状态.比如客户端向服务器发送请求,如果成功的获得请求的资源,则返回的状态码为200,表示相应成功.如果请求的资源不存在,则通常返回404错误. Http状态 ...

  3. Freemarker 程序开发

    Freemarker 程序开发 现在web开发中,多使用freemarker 来描述页面.通常会使用的macro来定义各种组件,从而达到UI组件的复用.结合使用其它的指定,可快速的描述一个html页面 ...

  4. linux基本知识

    1.默认不写端口号就是80端口   127.0.0.1.localhost都代表本机 2.linux下的用户管理: id:可以查看当前用户whoami:查看当前的用户who:看当前已经登录的用户w:也 ...

  5. Spring ApplicationContext 简解

    ApplicationContext是对BeanFactory的扩展,实现BeanFactory的所有功能,并添加了事件传播,国际化,资源文件处理等.   configure locations:(C ...

  6. SQL Server 2008 R2:快速清除日志文件的方法

    本例,快速清理“students”数据库的日志,清理后日志文件不足1M. USE [master] GO ALTER DATABASE students SET RECOVERY SIMPLE WIT ...

  7. linux基础知识3_根文件系统详解

    文件系统: rootfs:根文件系统 /boot:系统启动相关的文件,如内核.initrd以及grub /dev:设备文件 块设备:随机访问 字符设备:线性访问,按字符为单位 设备号:主设备号(maj ...

  8. java简单模拟生产者消费者问题

    本文来自:http://www.cnblogs.com/happyPawpaw/archive/2013/01/18/2865957.html 引言 生产者和消费者问题是线程模型中的经典问题:生产者和 ...

  9. nginx服务傻瓜搭建

    nginx服务傻瓜搭建 安装步骤: 一.先准备好相关源码包和程序包,如下图 所有包都在云服务器的/src目录下. 二.安装 1.安装nginx服务器,支持vod stream.fileupload c ...

  10. Checkstyle:整洁你的代码

    内容 Checkstyle简介 下载 Checkstyle的几种使用方式 1) 与Ant结合使用 2) 通过CLI使用 3)在IDE上使用插件 4)在Maven上使用插件 Checkstyle配置 配 ...