But the flexible application of CSS will give people a bright feeling!
The following is a simple example to illustrate what I want to say.
CSS code:
Copy Code code as follows:
#nav Li ul {
Display:none;
}
HTML code:
Copy Code code as follows:
<div id= "NAV" >
<ul class= "" >
<li>
<ul>
<li> submenu 1</li>
<li> submenu 2</li>
<li> submenu 3</li>
<li> submenu 4</li>
</ul>
</li>
<li>
<ul>
<li> submenu 1</li>
<li> submenu 2</li>
<li> submenu 3</li>
<li> submenu 4</li>
<li> submenu 4</li>
</ul>
</li>
</ul>
</div>
The effect is as follows:
The desired effect is:
1, at the beginning, all the submenus are hidden.
2, click the menu item, the corresponding submenu list display.
3, click again, the submenu hidden.
Half a year ago I would have done this: get the H3 element in the #nav and loop on it to add the event. Event to determine whether its next sibling node is hidden, modify the display property of the submenu UL element according to the state.
The code is roughly as follows: (all of the following code is for expression logic only, so don't dwell on whether it is executable.) ）
Copy Code code as follows:
var els = [...]; The code gets an array of H3 elements.
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);
}
One months ago, this was probably the case: adding events directly to #nav > ul to determine whether the target object H3 the object in the event. If so, the next sibling node is obtained and the display property is modified according to its displayed state.
The code is roughly as follows:
Copy Code code as follows:
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);
The two approaches, whichever is superior, please judge for yourself.
Some time ago I did a need to see another idea in the code--that's what I'm talking about here--using CSS to do the interaction.
Still the code:
CSS code:
Copy Code code as follows:
#nav Li.menu ul {
Display:block;
}
The JS code is roughly as follows:
Copy Code code as follows:
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);
Look at the code, looks like the third method is similar to the second kind.
Well ~ ~, if click H3 element is not only modify the next UL element display state, such as also want to modify H3 background pattern?
At this point the second method needs to modify the value based on the background property of H3, and the third only needs to add one style: #nav li.menu h3{background:url (...)} can be done.
There is nothing left to say. Everyone has their own judgment, which is superior to the inferior in the heart of its own judgement.
Ps:
If a page has other stylesheets that affect your style, there is a question of priority. We all know the priority of Id,class and tag, but how does the priority of an expression count?
Google it, or take a look at the "old fashioned CSS priority" first.
