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 源码分析笔记(7) Queue
Jun 19 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 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
PHP新手上路(九)
2006/10/09 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Django的分页器实例(paginator)
2017/12/01 Python
python实现京东秒杀功能
2018/07/30 Python
Python调用C语言的实现
2019/07/26 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Python之Sklearn使用入门教程
2021/02/19 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
解除合同协议书
2014/04/17 职场文书
企业文化口号
2014/06/12 职场文书
股东授权委托书
2014/10/15 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
维稳承诺书
2015/01/20 职场文书
旅游项目合作意向书
2015/05/08 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript