js css在交互中的应用

但是，灵活应用CSS会给人一种明亮的感觉！这里有一个简单的例子来说明我想说的。代码：复制代码如下： # nav Li ul { display : none；} HTML代码：复制的代码代码如下： div id=' nav ' ul class=' Li H3 menu 1/ul Li子菜单1/li li子菜单2/li li子菜单3/li li子菜单4/Li/ul/Li H3 menu 2/ul Li子菜单1/li li子菜单2/li子菜单3/li子菜单4/li /ul /li /ul /div的效果如下：。

所需效果如下：1 .最初，所有子菜单都是隐藏的。2.点击菜单项，会显示相应的子菜单列表。3.再次单击以隐藏子菜单。半年前，我会这样做：在#nav中获取h3元素，并在上面循环添加事件。事件确定其下一个同级节点是否隐藏，并根据状态修改子菜单ul元素的显示属性。代码大致如下：(以下所有代码仅用于表达逻辑，请不要担心能否执行。)复制代码如下： var els=[.];//代码获取h3元素数组。for(var I=0；长度；i ) { els[i]。addEventListener('click '，function(){ var target=this . next sibling；if(target . style . display==' none ')target . style . display=' block '；else target . style . display=' none ' }，false)；}一个月前大概是这样的：直接给#nav ul添加一个事件，判断事件中的目标对象是否是h3对象。如果是，则获取下一个同级节点，并根据其显示状态修改显示属性。代码大致如下：复制代码如下： varcontainer=document . getelementbyid(' nav ')；container . addeventlistener(' click '，function(e) { var target=e.target，listif(target . tagname==' H3 '){ list=target . next sibling；if(list . style . display===' none ')list . style . display=' block '；else list . style . display=' none '；} }，false)；请你自己判断这两种方法哪个更好。前段时间我做了一个要求，在代码中看到了另一个想法，——。这就是我在这里想说的。——使用CSS完成交互。静止代码：CSS代码：复制代码如下： # navli . menuul { display : block；} JS代码大致如下：复制代码如下： var El=document . getelementbyid(' nav ')；el.addEventListener('click ')，函数(e){ var target=e . target . parent node；if(target . tagname=' LI '){ if(target . class name=')' target . class name=' menu '；} else { target.className=} } }，false)；看代码，好像第三种方法和第二种方法差不多。嗯~ ~，如果点击h3元素不仅仅是修改下一个ul元素的显示状态，比如修改h3的背景图案？此时，第二种方法需要根据h3的背景属性修改值，而第三种方法只需要添加一个样式：# navli . menu H3 { background : URL(.)}.没什么好说的了。每个人都有自己的判断，孰优孰劣。PS:如果一个页面上有其他样式表影响你的风格，就会有优先级问题。我们都知道id、类和标签的优先级，但是一个表达式的优先级是如何计算的呢？请谷歌一下，或者先看看《老调重弹的CSS优先级》。