js+css在交互上的应用


Posted in Javascript onJuly 18, 2010

但灵活应用CSS会有给人眼前一亮的感觉!

以下用一个简单的例子来阐述我想说的。

CSS代码:

#nav li ul { 
display:none; 
}

HTML代码:
<div id="nav"> 
<ul class=""> 
<li> 
<h3>菜单1</h3> 
<ul> 
<li>子菜单1</li> 
<li>子菜单2</li> 
<li>子菜单3</li> 
<li>子菜单4</li> 
</ul> 
</li> 
<li> 
<h3>菜单2</h3> 
<ul> 
<li>子菜单1</li> 
<li>子菜单2</li> 
<li>子菜单3</li> 
<li>子菜单4</li> 
<li>子菜单4</li> 
</ul> 
</li> 
</ul> 
</div>

效果如下:
js+css在交互上的应用
需要的效果是:

1、初始时,所有的子菜单都是隐藏的。

2、点击菜单项,相应的子菜单列表显示。

3、再点击, 子菜单隐藏。

半年前的我的做法会是这样:取得#nav中的h3元素,循环在其上添加事件。事件判断其下一个兄弟节点是否隐藏,根据状态修改子菜单ul元素的display属性。

代码大致如下:(以下所有代码仅用于表达逻辑,请不要纠结于是否可执行。)

var els = [...]; //代码取得h3元素数组。 
for(var i=0; i < els.length; i++) { 
els[i].addEventListener("click",function() { 


var target = this.nextSibling; 


if(target.style.display == "none") 



target.style.display = "block"; 


else 



target.style.display = "none" 

}, false); 
}

一个月前的话,做法大概是这样:在#nav > ul上直接添加事件,在事件中判断目标对象是否h3对象。如果是则取得下一个兄弟节点,并根据其显示状态来修改display属性。
代码大致如下:
var container = document.getElementById("nav"); 
container.addEventListener("click", function(e) { 
var target = e.target, list; 

if(target.tagName == "H3") { 


list = target.nextSibling; 


if(list.style.display === "none") 



list.style.display = "block"; 


else 



list.style.display = "none"; 

} 
}, false);

两种做法,孰优孰劣请自行判断。
前段时间做了一个需求,在代码中看到另外的一种思路——这才是我在这里要说的——利用CSS来完成交互。
依然是代码:
CSS代码:
#nav li.menu ul { 
display:block; 
}

JS代码大致如下:
var el = document.getElementById("nav"); 
el.addEventListener("click", function(e) { 
var target = e.target.parentNode; 

if(target.tagName == "LI") { 


if(target.className == "") 



target.className = "menu"; 


}else { 



target.className = ""; 


} 

} 
}, false);

看看代码,貌似第三种方法跟第二种差不多嘛。
恩~~,如果点击h3元素不止是修改下一个ul元素的显示状态,比如还要修改h3的背景图案呢?
这时候第二个方法需要在根据h3的background属性来修改值,而第三种只需要添加一条样式:#nav li.menu h3{background:url(...)}即可了。

其他的就没什么好说了。大家都有自己的判断,孰优孰劣心里自有评断。

PS:
如果一个页面存在别的样式表影响了你的样式,就会有个优先权的问题。我们都知道id,class和tag的优先级别,但是对一个表达式,它的优先权是怎么计算的呢?
请google一下,或者先看看《老调重弹的CSS优先级》。

Javascript 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
基于jQuery试卷自动排版系统
Jul 18 #Javascript
Date对象格式化函数代码
Jul 17 #Javascript
js下利用控制器载入对应脚本
Jul 17 #Javascript
js 纯数字不重复排列的另类方法
Jul 17 #Javascript
jQuery Autocomplete自动完成插件
Jul 17 #Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 #Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 #Javascript
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python获得图片base64编码示例
2014/01/16 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
使用python实现BLAST
2018/02/12 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
公司廉洁自律承诺书
2014/03/27 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
青年教师个人总结
2015/02/11 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
python中对列表的删除和添加方法详解
2022/02/24 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js
springboot读取nacos配置文件
2022/05/20 Java/Android