jQuery实现的checkbox级联选择下拉菜单效果示例


Posted in Javascript onDecember 26, 2016

本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script language="JavaScript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<!--table 一行一列:table 三行一列:table 一行一列:table 三行一列:table-->
 <table width="156">
  <tr>
   <td>
    <table width="152">
     <tr width="152">
     <td>
      <table width="152">
        <tr>
         <td>
         <table width="98%" align="center">
          <tr style="color:red;background:blue" onClick="show('1') ">
           <td><img src="./ui/images/yonghu.png"></td>
           <td>用户管理</td>
           <td><img src="./ui/images/zhankai.png"></td>
          </tr>
         </table>
         </td>
        </tr>
        <tr id="tr0_1" style="DISPLAY: none">
         <td>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/yonghuxinxi.png"></td>
            <td>用户信息</td>
          </tr>
          </table>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/juesequanxian.png"></td>
            <td>角色权限</td>
          </tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
     <tr width="152">
     <td>
      <table width="152">
        <tr>
         <td>
         <table width="98%" align="center">
          <tr style="color:red;background:blue" onClick="show('2') ">
           <td><img src="./ui/images/kehu.png"></td>
           <td>客户管理</td>
           <td><img src="./ui/images/zhankai.png"></td>
          </tr>
          </table>
         </td>
        </tr>
        <tr id="tr0_2" style="DISPLAY: none">
         <td><!-- 一列两个table-->
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/kehuxinxi.png"></td>
            <td>客户信息</td>
          </tr>
          </table>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/lianxiren.png"></td>
            <td>联系人列表</td>
          </tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
     <tr width="152">
     <td>
      <table width="152">
        <tr>
         <td>
         <table width="98%" align="center">
          <tr style="color:red;background:blue" onClick="show('3')">
           <td><img src="./ui/images/xitong.png"></td>
           <td>系统管理</td>
           <td><img src="./ui/images/zhankai.png"></td>
          </tr>
          </table>
         </td>
        </tr>
        <tr id="tr0_3" style="DISPLAY: none">
         <td>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/xitongrizhi.png"></td>
            <td>系统日志</td>
          </tr>
          </table>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/shujuzidian.png"></td>
            <td>数据字典</td>
          </tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
   </table>
  </td>
 </tr>
 </table>
</body>
<script language="JavaScript">
<!--js dom: 根据tr0_id, id的值,进行操作。得到tr的length,遍历,判断id值,根据传入的id值,拼装tr0_id,-->
<!--拿到对应的tr元素,设置 显示或隐藏 -->
function show(id){
 //使用循环遍历找到需要控制的所有隐藏的tr
 var $tr = $("tr[id^='tr0']");
// alert($tr.length);
 $tr.each(function(index,domEle){
  //查找当前onclick操作的tr
  //检查 每次循环遍历 操作要对应的tr,隐藏的,就三个,看看是哪一个
  //
  if(id==index+1){
   //如果当前的tr处于隐藏状态,就得显示
   if($(this).is(":hidden")){
     $(this).attr("style","DISPLAY: block");
   }
   //如果当前的tr处于显示状态,就得隐藏
   else{
    $(this).attr("style","DISPLAY: none");
   }
  }
  <!--把其他的打开的 隐藏 每次都会遍历-->
  else{
   //将不选择的tr都隐藏
   $(domEle).attr("style","DISPLAY: none");
  }
 })
}
</script>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 #Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 #Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 #Javascript
jQuery实现动态添加tr到table的方法
Dec 26 #Javascript
浅谈JavaScript的计时器对象
Dec 26 #Javascript
js模糊查询实例分享
Dec 26 #Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 #Javascript
You might like
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php支付宝接口用法分析
2015/01/04 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python2 与python3的print区别小结
2018/01/16 Python
Python入门之后再看点什么好?
2018/03/05 Python
详解Python如何生成词云的方法
2018/06/01 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
QML使用Python的函数过程解析
2019/09/26 Python
python如何提升爬虫效率
2020/09/27 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
行政部主管岗位职责
2013/12/28 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
大学生创业计划书
2019/06/24 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
MySQL数据管理操作示例讲解
2022/12/24 MySQL