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 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 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
PHP5中MVC结构学习
2006/10/09 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
python2.7安装图文教程
2018/03/13 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
优质服务演讲稿
2014/05/14 职场文书
派出所所长先进事迹
2014/05/19 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
党员违纪检讨书
2015/05/05 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS