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 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue filters的使用详解
Jun 11 Javascript
layui获取选中行数据的实例讲解
Aug 19 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php文档更新介绍
2011/07/22 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
python实现按任意键继续执行程序
2016/12/30 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
pandas值替换方法
2018/07/10 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
详解python和matlab的优势与区别
2019/06/28 Python
python实现函数极小值
2019/07/10 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Django 自定义分页器的实现代码
2019/11/24 Python
如何基于python实现归一化处理
2020/01/20 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
党员查摆四风问题思想汇报
2014/10/25 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
MySQL的安装与配置详细教程
2021/06/26 MySQL
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL