JS实战篇之收缩菜单表单布局


Posted in Javascript onDecember 10, 2016

获取节点的两种方式:

    1、通过event对象的srcElement属性;

    2、通过事件源对象用this传入。

代码如下:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>收缩菜单 · 表单布局</title>
  <script type="text/javascript">
    function list(dtNode){
      // var dtNode = event.srcElement;
      var dlNode = dtNode.parentNode;
      // alert(dtNode.nodeName+"---"+dlNode.nodeName);
      var dlNodes = document.getElementsByTagName("dl");
      // alert(dlNodes.length);
      for(var i=0; i<dlNodes.length; i++){
        if(dlNodes[i] == dlNode){
          /*判断当前标题是展开还是关闭状态,默认关闭,先执行else语句*/
          if(dlNode.className == "open"){
            dlNode.className = "close";
          }
          else{
            dlNode.className = "open";
          }
        }
        else{
          dlNodes[i].className = "close";
        }
      }
    }
  </script>
  <style type="text/css">
    dl{
      overflow: hidden;
      height: 18px;
    }
    .open{
      overflow: visible;
    }
    .close{
      overflow: hidden;
    }
  </style>
</head>
  <!-- 获取节点的两种方式:
  1、通过event对象的srcElement属性;
  2、通过事件源对象用this传入
 -->
<body>
  <!-- 事件源是dt,但是操作的是dl -->
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
</body>
</html>
Javascript 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
javascript 模拟点击广告
Jan 02 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
javascript动画之磁性吸附效果篇
Dec 09 #Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 #Javascript
详解自动生成博客目录案例
Dec 09 #Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 #Javascript
JS判断是否手机或pad访问实现方法
Dec 09 #Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 #Javascript
利用JS实现页面删除并重新排序功能
Dec 09 #Javascript
You might like
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
先进教师事迹材料
2014/12/16 职场文书
公司年会主持词范文!
2019/05/07 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
MySQL常用慢查询分析工具详解
2022/08/14 MySQL