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十个最常用的自定义函数(中文版)
Sep 07 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 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
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php安装swoole扩展的方法
2015/03/19 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Angularjs 事件指令详细整理
2017/07/27 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python将字典转换为XML的方法
2020/08/01 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
家长给老师的道歉信
2014/01/13 职场文书
化学教学随笔感言
2014/02/19 职场文书
读书活动实施方案
2014/03/10 职场文书
购房意向书
2014/04/01 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
大学团日活动总结书
2015/05/11 职场文书
离婚答辩状范文
2015/05/22 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书