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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
一个简单的php路由类
2016/05/29 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
从零学Python之hello world
2014/05/21 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
python代码实现猜拳小游戏
2020/11/30 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
思想政治教育专业个人求职信范文
2013/12/20 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
运动会口号8字
2014/06/07 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
招标授权委托书样本
2014/09/23 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
感动中国何玥观后感
2015/06/02 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书