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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
js实现点击烟花特效
Oct 14 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下几种删除目录的方法总结
2007/08/19 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
js计算精度问题小结
2013/04/22 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python爬虫实例详解
2018/06/19 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
四风自我剖析材料思想汇报
2014/10/01 职场文书
个人汇报材料范文
2014/12/30 职场文书
九年级英语教学反思
2016/02/15 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
python 调用js的四种方式
2021/04/11 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers
解决Redis启动警告问题
2022/02/24 Redis