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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
xml和web特殊字符
Apr 28 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
基于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
php中使用sftp教程
2015/03/30 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python开发入门——set的使用
2020/09/03 Python
用Python 执行cmd命令
2020/12/18 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
《春天来了》教学反思
2014/04/07 职场文书
安全生产奖惩制度
2015/08/06 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书