js+css在交互上的应用
发布时间:2024-04-17 10:37:49
标签: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优先级》。
0
投稿
猜你喜欢
- 路由原理在Tornado框架中,路由是指将请求的URL映射到对应的处理函数上,这个过程需要通过正则表达式来实现。Tornado使用了一种叫做
- 先给一个例子:假设在一个表单中有一个按钮id="save"$(document).ready(function(){&n
- 实现了宽度、高度、透明度的渐变,还能以高度宽度中点为中心,还扩展成以任意点为中心渐变(实例中以点击点为中心)。<!DOCTYPE ht
- 1、问题:群中有同学贴了如下一段代码,问为何 list 最后打印的是空值? from multiprocessing
- views,中设置请求的类型class LawDetailView(View): def get(self, request, law_id
- 本文实例讲述了MySQL学习笔记之数据定义表约束,分页方法。分享给大家供大家参考,具体如下:1. primary key 主键特点:主键是用
- 代码如下:--相信大家肯定经常会把数据导入到数据库中,但是可能会有些记录行的所有列的数据是null,这为null的数据是我们不需要 --现在
- 在使用Python做脚本的话,有两个库可以使用,一个为PyUserInput库,另一个为pyautogui库。就本人而言,我更喜欢使用pya
- 将转储设备加入到SQL Server备份数据库的地方。在SEM中转储设备是可见性的,并且在设备上的信息被存储在主要数据库的sysdevice
- MYSQL的profiling功能要在Mysql版本5.0.37以上才能使用。查看profile是否开启mysql> show var
- 目录1、切片的基础用法2、切片的高级用法3、自定义对象实现切片功能3.1、魔术方法:`getitem()`3.2、自定义序列实现切片功能3.
- 如下所示:def is_chinese(uchar): """判断一个unicode是否是汉字"&q
- 在python代码编写过程中,养成注释的习惯非常有用,可以让自己或别人后续在阅读代码时,轻松理解代码的含义。如果只是简单的单行注释,可直接用
- 用CSV格式来保存文件是个不错的主意,因为大部分程序设计语言和应用程序都能处理这种格式,所以交流起来非常方便。然而这种格式的存储效率不是很高
- 当获取FileField数据时会出现编码问题在数据库里显示的是D:\python项目\wxmkczpy\uploadfile\QQ截图201
- 一、准备工作1、确保jdk已安装成功,并且jdk版本选用1.7以上版本2、准备一台新的主机mysql_mycat放到master的前面做代理
- 这年头如果用 python3 做条形码的,肯定(推荐)用 pystrich 。这货官方文档貌似都没写到支持 Code128 ,但是居然有这个
- Python中单类继承Python是一门面向对象的编程语言,支持类继承。新的类称为子类(Subclass),被继承的类称为父类、基类或者超类
- 代码如下: 代码如下:<% '用ASP获取远程目标网页指定内容On Error Resume Next Server.Scri
- 如何获取一个网站的相关信息,获取赶集网的招聘信息,本文为大家介绍利用python获取赶集网招聘信息的关键代码,供大家参考,具体内容如下imp