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插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
js常用代码段收集
2011/10/28 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Vue中props的详解
2019/05/16 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
幼儿园安全责任书
2014/04/14 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
农业项目建议书
2014/08/25 职场文书
运动会广播稿100字
2014/09/14 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015国庆节宣传语
2015/07/14 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
图文详解nginx日志切割的实现
2022/01/18 Servers