Application of js css in interaction_javascript skills

But flexible application of CSS will give people a bright feeling!

The following uses a simple example to illustrate what I want to say.

CSS code:

Copy code The code is as follows:

#nav li ul {
display:none;
}

HTML code:

Copy code The code is as follows:

• 
  

  Menu 1

  
  
  
  
  • Submenu 1
  
  
  • Submenu 2
  
  
  • Submenu 3< ;/li>
    
  • Sub menu 4
  
  
  
  


• 
  

  Menu 2< ;/h3>
  

  
  
  • Submenu 1
  
  
  • Submenu 2
  
  
  • Submenu 3
    
  • Sub menu 4
  
  
  • Sub menu 4
  
  

  
  

The effect is as follows:

The required effect is:

1. Initially, All submenus are hidden.

2. Click the menu item and the corresponding submenu list will be displayed.

3. Click again to hide the submenu.

What I did half a year ago would be like this: get the h3 element in #nav and add events to it in a loop. The event determines whether its next sibling node is hidden, and modifies the display attribute of the submenu ul element according to the status.

The code is roughly as follows: (All the following codes are only used to express logic, please do not worry about whether it is executable.)

Copy code The code is as follows:

var els = [...]; //The code obtains the h3 element array.
for(var i=0; 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 approach was probably like this: add an event directly to #nav > ul, and determine whether the target object is an h3 object in the event. If so, get the next sibling node and modify the display attribute according to its display status.
The code is roughly as follows:

Copy code The code is 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);

Two methods, please decide for yourself which one is better.
I made a request some time ago and saw another idea in the code - this is what I want to talk about here - using CSS to complete interaction.
Still the code:
CSS code:

Copy the code The code is as follows:

#nav li.menu ul {
display:block;
}

The JS code is roughly as follows:

Copy code The code is 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);

코드를 보면 세 번째 방법도 두 번째 방법과 거의 비슷한 것 같습니다.
그럼~~ h3 요소를 클릭하면 다음 ul 요소의 표시 상태가 변경될 뿐만 아니라 h3의 배경 패턴도 변경된다면 어떨까요?
이때 두 번째 방법은 h3의 배경 속성에 따라 값을 수정해야 하고, 세 번째 방법은 스타일만 추가하면 됩니다: #nav li.menu h3{Background:url(...)} .

더 이상 할 말이 없습니다. 모든 사람은 자신의 판단을 가지고 있으며, 어느 것이 더 좋고 어느 것이 더 나쁜지에 대한 판단이 있습니다.

PS:
페이지에 스타일에 영향을 미치는 다른 스타일 시트가 있는 경우 우선순위 문제가 발생합니다. 우리 모두는 ID, 클래스, 태그의 우선순위를 알고 있지만 표현식의 우선순위는 어떻게 계산됩니까?
Google에서 검색하거나 "CSS 우선순위 다시 "를 먼저 살펴보세요.