Interaction application of JS + CSS

But the flexible application of CSS will give people a bright impression!

The following is a simple example.

CSSCode:Copy codeThe Code is as follows: # nav Li ul {
Display: none;
}

HTML code:Copy codeThe Code is as follows: <Div id = "nav">
<Ul class = "">
<Li>
<H3> menu 1 <Ul>
<Li> sub-menu 1 </LI>
<Li> sub-Menu 2 </LI>
<Li> sub-menu 3 </LI>
<Li> sub-menu 4 </LI>
</Ul>
</LI>
<Li>
<H3> menu 2 <Ul>
<Li> sub-menu 1 </LI>
<Li> sub-Menu 2 </LI>
<Li> sub-menu 3 </LI>
<Li> sub-menu 4 </LI>
<Li> sub-menu 4 </LI>
</Ul>
</LI>
</Ul>
</Div>

The effect is as follows:

The result is:

1. Initially, all sub-menus are hidden.

2. Click the menu item and the corresponding sub-Menu list is displayed.

3. Click again to hide the sub-menu.

Half a year ago, my approach would be like this: Get the H3 element in # nav and add events on it cyclically. Event to determine whether the next sibling node is hidden. Modify the display attribute of the UL element in the sub-menu according to the state.

The code is roughly as follows: (all the following code is only used to express logic. Do not worry about whether it can be executed .)Copy codeThe Code is as follows: var els = [...]; // The code gets the H3 element array.
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 );
}

A month ago, the procedure was like this: directly add an event on # nav> ul to determine whether the target object is an H3 object. If yes, obtain the next sibling node and modify the display Attribute Based on its display status.
The code is roughly as follows:Copy codeThe Code is as follows: var Container = Document. getelementbyid ("nav ");
Container. addeventlistener ("click", function (e ){
VaR target = e.tar get, list;
If (target. tagname = "H3 "){
List = target. nextsibling;
If (list. style. Display = "NONE ")
List. style. Display = "Block ";
Else
List. style. Display = "NONE ";
}
}, False );

In either of the two ways, you can determine the advantages and disadvantages.
Some time ago I made a requirement and saw another idea in the code -- this is what I want to talk about here -- using CSS to complete interaction.
Still code:
CSS code:Copy codeThe Code is as follows: # nav Li. Menu ul {
Display: block;
}

The JS Code is roughly as follows:Copy codeThe Code is as follows: var El = Document. getelementbyid ("nav ");
El. addeventlistener ("click", function (e ){
VaR target = e.tar get. parentnode;
If (target. tagname = "Li "){
If (target. classname = "")
Target. classname = "menu ";
} Else {
Target. classname = "";
}
}
}, False );

Look at the code. It seems that the third method is similar to the second one.
~~, If you click H3 to modify the display status of the next ul element, for example, you need to modify the H3 background pattern?
At this time, the second method needs to modify the value according to the background attribute of H3, while the third method only needs to add a style: # nav Li. menu H3 {Background: URL (...)} you can.

Nothing else can be said. Everyone has their own judgment, and they have their own discretion.

PS:
If another style sheet on a page affects your style, the priority issue may occur. We all know the priority levels of ID, class, and tag. But how is the priority calculated for an expression?
Please Google it, or take a look at "the CSS priority of the old bullet".