CSS在交互上的应用

网络整理 - 07-27

关于css应用。以前一直认为css就是做布局样式,只能表现页面,跟交互是没关系的。事实上也基本不会往那边想。

但灵活应用CSS会有给人眼前一亮的感觉!

以下用一个简单的例子来阐述我想说的。

CSS代码:

1 #nav li ul {

2         display:none;

3     }

HTML代码:

01 <div id="nav">

02     <ul class="">

03         <li>

04             <h3>菜单1</h3>

05             <ul>

06                 <li>子菜单1</li>

07                 <li>子菜单2</li>

08                 <li>子菜单3</li>

09                 <li>子菜单4</li>

10             </ul>

11         </li>

12         <li>

13             <h3>菜单2</h3>

14             <ul>

15                 <li>子菜单1</li>

16                 <li>子菜单2</li>

17                 <li>子菜单3</li>

18                 <li>子菜单4</li>

19                 <li>子菜单4</li>

20             </ul>

21         </li>

22     </ul>

23 </div>

效果如下:

需要的效果是:

1、初始时,所有的子菜单都是隐藏的。

2、点击菜单项,相应的子菜单列表显示。

3、再点击, 子菜单隐藏。

半年前的我的做法会是这样:取得#nav中的h3元素,循环在其上添加事件。事件判断其下一个兄弟节点是否隐藏,根据状态修改子菜单ul元素的display属性。

代码大致如下:(以下所有代码仅用于表达逻辑,请不要纠结于是否可执行。)

01 var els = [...]; //代码取得h3元素数组。

02 for(var i=0; i < els.length; i++) {

03   els[i].addEventListener("click",function() {

04     var target = this.nextSibling;

05     if(target.style.display == "none") 

06       target.style.display = "block";

07     else

08       target.style.display = "none"

09   }, false);

10 }

一个月前的话,做法大概是这样:在#nav > ul上直接添加事件,在事件中判断目标对象是否h3对象。如果是则取得下一个兄弟节点,并根据其显示状态来修改display属性。

代码大致如下:

01 var container = document.getElementById("nav");

02 container.addEventListener("click", function(e) {

03   var target = e.target, list;

04   if(target.tagName == "H3") {

05     list = target.nextSibling;

06     if(list.style.display === "none") 

07       list.style.display = "block";

08     else

09       list.style.display = "none";

10   }

11 }, false);

两种做法,孰优孰劣请自行判断。

前段时间做了一个需求,在代码中看到另外的一种思路——这才是我在这里要说的——利用CSS来完成交互。

依然是代码:

CSS代码:

1 #nav li.menu ul {

2         display:block;

3     }

JS代码大致如下:

01 var el = document.getElementById("nav");

02 el.addEventListener("click", function(e) {

03   var target = e.target.parentNode;

04   if(target.tagName == "LI") {

05     if(target.className == "")

06       target.className = "menu";

07     }else {

08       target.className = "";

09     }

10   }

11 }, false);

看看代码,貌似第三种方法跟第二种差不多嘛。

恩~~,如果点击h3元素不止是修改下一个ul元素的显示状态,比如还要修改h3的背景图案呢?

这时候第二个方法需要在根据h3的background属性来修改值,而第三种只需要添加一条样式:#nav li.menu h3{background:url(...)}即可了。

其他的就没什么好说了。大家都有自己的判断,孰优孰劣心里自有评断。

PS:

如果一个页面存在别的样式表影响了你的样式,就会有个优先权的问题。我们都知道id,class和tag的优先级别,但是对一个表达式,它的优先权是怎么计算的呢?