jquery多级下拉菜单
var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0});
/*
参数说明:
target : 点击事件发生在该元素内
way : 0 只显示一个,1允许显示多个;
parent : 点击的祖先元素标识,用以查找控制元素
contr : 控制的元素 */
function Click(me,parm){
var tar = parm.target, parent = parm.parent, contr = parm.contr, way = parm.way;
$(me).click(function(e){
var t = $(e.target);
if(t.is(tar) || t.closest(tar).size()>0){
// 下一级
var m = t.closest(parent).children(contr); // 判断下一级显示
if(m.is(':hidden')) {
m.slideDown();
if(!way){
t.closest(parent).siblings(parent).find(contr).slideUp();
};
}else{
m.slideUp();
};
};
});
};
demo:
点击文字展开
2015-2016学年下学期初二期末考试(三)
科目:语文95
- 其他
科目:数学110
- 其他
2015-2016学年下学期初二期末考试(三)2
科目:语文99
- 其他
科目:英语100
- 其他
点击箭头展开
2015-2016学年下学期初二期末考试(三)
↓
科目:语文95
↓
- 其他
科目:数学110
↓
- 其他
2015-2016学年下学期初二期末考试(三)2
↓
科目:语文99
↓
- 其他
科目:英语100
↓
- 其他
jquery多级下拉菜单的更多相关文章
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- jQuery水平下拉菜单实现
<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> ...
- 一款多浏览器兼容的javascript多级下拉菜单
这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...
- jquery 实现下拉菜单
Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js 版本不限 : 接下来把=================== ...
- 第72天:jQuery实现下拉菜单
jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...
- jquery带下拉菜单和焦点图
jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...
- 小程序多级下拉菜单demo
小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211
- bootstrap多级下拉菜单
只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...
随机推荐
- MVC创建
[1]创建ASP.NET_MVC应用程序 1>新建项目>web>Visual Studio 2012>ASP.NET MVC4 Web应用程序 2>填写名称,位置 ...
- JSON.parse() JSON.stringify() eval() jQuery.parseJSON() 的区别
http://www.jb51.net/article/81880.htm : jQuery.parseJSON(jsonString) : 将格式完好的JSON字符串转为与之对应的Java ...
- eclipse设置JSP的默认编码
有时候我们新建一个JSP页面,但是编码却不是我们想要的,我们可在eclipse里面进行如下设置: 点击eclipse上面的window-->preferences 输入查找jsp-->点击 ...
- BOS物流管理系统-第一天
BOS物流管理系统-第一天-系统分析.环境搭建.前端框架 BoBo老师 整体项目内容目标: 对项目概述的一些理解 亮点技术的学习 注意学习方式:优先完成当天代码. 其他内容. 最终: 学到新的技术,会 ...
- laravel5.2/laravel5.3入门指南 Windows 上快速安装并运行 Laravel 5.x
1 首先要搭建本地服务器环境推荐phpstudy2016及wampServer3.0.6 下载链接可参考 http://www.cnblogs.com/zzcit/p/5823742.html 注意一 ...
- COCOA® PROGRAMMING FOR MAC® OS X (2)- Speak Line
1.NSControl是所有控件的父类,NSControl继承自NSView,因此NSControl是一个能够独立响应事件的NSView,每个NSControl含有一个Target和Action,当用 ...
- 使用 mulan-1.5.0 如何构造.arff文件
1. 为什么要使用mulan 我用mulan来做多标签数据的分类,但是mulan的输入数据由两个文件控制,一个是data.arff文件,这个文件列出的所有的属性以及这些属性值的类型和他们对应的值.la ...
- 利用scrollTop 制作图片无缝滚动
<!doctype html><title>javascript无缝滚动 by 司徒正美</title><meta charset="utf-8&q ...
- Spring 中,对象销毁前执行某些处理的方法
通过 @PreDestroy 和 bean 中配置 destroy-method 实现该功能 java 代码中: 1: public class TestClass { 2: private Sche ...
- Chapter 15_4 子模块和包
Lua支持具有层级性的模块名,可以用一个点来分隔名称中的层级. 比如,一个mod.sub模块,它就是mod的子模块.一个包(package)就是一个完整的模块树. 当你require "mo ...