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中的var_dump函数实现代码
Sep 07 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
Vue实现菜单切换功能
Nov 08 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
CI框架附属类用法分析
2018/12/26 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python for循环生成列表的实例
2018/06/15 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
无偿献血倡议书
2014/04/14 职场文书
防沙治沙典型材料
2014/05/07 职场文书
党建工作整改措施
2014/10/28 职场文书