js+css在交互上的应用
时间:2024-04-17 10:37:49
但灵活应用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,交互
0
投稿
猜你喜欢
Python 使用 PyQt5 开发的关机小工具分享
2023-09-15 05:06:02
javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] <font color=red>原创</font>
2024-04-18 09:50:31
Python和perl实现批量对目录下电子书文件重命名的代码分享
2022-01-28 02:51:48
用纯CSS3绘制的网站图标
2010-03-28 13:51:00
Pytorch中torch.repeat_interleave()函数使用及说明
2022-06-17 04:18:53
Python超详细讲解内存管理机制
2022-02-21 23:11:47
python定时任务timeloop库用法实例详解
2023-12-21 19:34:53
Javascript vue.js表格分页,ajax异步加载数据
2024-05-21 10:13:05
mysql中关键词exists的用法实例详解
2024-01-20 18:41:25
Python selenium实现断言3种方法解析
2023-06-06 06:08:53
MySQL远程连接不上的解决方法
2024-01-21 00:34:09
Python 安装setuptools和pip工具操作方法(必看)
2023-11-06 11:46:07
浅谈Python接口对json串的处理方法
2022-07-30 13:03:49
vue 动态创建组件的两种方法
2024-05-09 10:51:27
JavaScript获取一个范围内日期的方法
2024-04-28 09:50:33
Python如何通过ip2region解析IP获得地域信息
2021-08-02 12:59:04
PHP实现对数组分页处理实例详解
2023-11-21 07:08:13
Python中的TCP socket写法示例
2023-06-25 00:21:05
python变量赋值方法(可变与不可变)
2021-02-14 08:51:55
JS的get和set使用示例
2024-05-13 09:35:45