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

      • 其他
时间: 2024-10-11 00:33:47

jquery多级下拉菜单的相关文章

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

基于jQuery带图标的多级下拉菜单

之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发者来说非常实用.菜单时基于jQuery的,所以基本可以支持所有的浏览器. 在线预览   源码下载 实现的代码. html代码: <div class="content"> <ul class="vertical-nav dark red"> &l

Bootstrap 3 &amp; 4 的多级下拉菜单示例

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁.大气的Bootstrap界面上靠,着实要费一些功夫.下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用. Bootstrap 3 的多级下拉菜单示例 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title&

DroDownList控件多级下拉菜单

后台代码: /// <summary> /// 绑定下拉菜单 /// </summary> private void BindDropList() { DataTable dt = bacManage.GetAllArticleCategory(); CreateLevelDropDown(drpCategoryId, dt); } /// <summary> /// 创建分级下拉框 /// </summary> /// <param name=&qu

jQuery水平下拉菜单实现

<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" > <meta name="viewport" content=&

jquery 实现下拉菜单

Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=====================html贴出来: Html代码   <div class=”header_menu”> <ul> <li class=”menuli” id=”xtgl_menu”>系统管理</li> <li class=”menuli” id=”ggsq_menu”

第72天:jQuery实现下拉菜单

jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <sty

jQuery美化下拉菜单插件dropkick

dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该设定一个tabindex属性来设定导航菜单的排序. 在dropkick选择一个选项时,亦会触发事件,这意味着您的表单.AJAX工作和传统的一样,无需进行任何更改. 如本款不合适,请看下本站另一款jQuery下拉框能扩展和美化插件Chosen 特点 1.像一个下拉框一样工作 2.支持键盘:可通回车,上下方向健来

jQuery EasyUI 下拉菜单获取日期,最高年份为当前年份,最低年份为当前年份向前推10年

http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body>  <select class="ea