js+css在交互上的应用
更新时间：2010年07月18日 23:42:56 作者：
关于css应用。以前一直认为css就是做布局样式，只能表现页面，跟交互是没关系的。事实上也基本不会往那边想。
但灵活应用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>
效果如下：
需要的效果是：
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优先级》。
以下用一个简单的例子来阐述我想说的。
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>
效果如下：
需要的效果是：
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优先级》。
相关文章
这篇文章主要为大家详细介绍了断点续传的简单例子，前端文件提交，后端PHP文件接收,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本文通过一个小小题目逐步走进javascript 异步调用问题，本文附有解答过程，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要为大家详细介绍了基于layui实现登录页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
在互联网高速发展的今天，文件上传已经成为网页应用中的一个基本功能，随着用户上传文件尺寸的不断增大、对质量清晰度的要求也越来越高，所以本文给大家介绍了如何使用JavaScript实现文件秒传功能,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了微信小程序时间轴实现方法,结合实例形式分析了微信小程序wx:for语句使用与时间轴纵向布局相关操作技巧,需要的朋友可以参考下2019-01-01
变量作用域是每门编程语言都会涉及的话题，也是作为一名程序员必需掌握的知识点，能深入掌握变量作用域更有助于你编写稳定的程序。2009-10-10
这篇文章主要介绍了echarts大屏字体自适应的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要为大家介绍了Taro 小程序持续集成实现及原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
说到 javascript 中的定时器，我们肯定会想到 setTimeout() 和 setInterval() 这两个函数。本文将从 事件循环（Event Loop） 的角度来分析两者的工作原理和区别2016-12-12
最新评论