Interaction_javascript 기술에 js css 적용-JS 튜토리얼-php.cn

Interaction_javascript 기술에 js css 적용

WBOY

풀어 주다： 2016-05-16 18:22:54

원래의

1405명이 탐색했습니다.

하지만 CSS를 유연하게 적용하면 사람들에게 밝은 느낌을 줄 것입니다!

다음은 제가 말하고자 하는 바를 설명하기 위해 간단한 예를 사용합니다.

CSS 코드:

코드 복사 코드는 다음과 같습니다.

 
 #nav li ul { 
display:none; 
} 

HTML 코드:

코드 복사 코드는 다음과 같습니다.

메뉴 1

하위 메뉴 1

하위 메뉴 2
;하위 메뉴 3

하위 메뉴 1

하위 메뉴 2

하위 메뉴 3
하위 메뉴 4

효과는 다음과 같습니다.

필요한 효과는

1입니다. 처음에는 모든 하위 메뉴가 숨겨져 있습니다.
2. 메뉴 항목을 클릭하면 해당 하위 메뉴 목록이 표시됩니다.

3. 하위 메뉴를 숨기려면 다시 클릭하세요. Interaction_javascript 기술에 js css 적용

반년 전에 제가 했던 작업은 다음과 같습니다. #nav에서 h3 요소를 가져오고 루프에 이벤트를 추가하는 것입니다. 이벤트는 다음 형제 노드가 숨겨져 있는지 확인하고 상태에 따라 하위 메뉴 요소의 표시 속성을 수정합니다.

코드는 대략 다음과 같습니다. (다음 코드는 모두 논리를 표현하기 위한 코드일 뿐 실행 가능 여부는 걱정하지 않으셔도 됩니다.)

코드 복사

코드는 다음과 같습니다.

var els = [...] //코드는 h3 요소 배열을 가져옵니다. 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) ; 
} 

한 달 전 접근 방식은 아마도 다음과 같았을 것입니다. #nav > ul에 직접 이벤트를 추가하고 이벤트에서 대상 개체가 h3 개체인지 확인합니다. 그렇다면 다음 형제 노드를 가져오고 표시 상태에 따라 표시 속성을 수정합니다. 
코드는 대략 다음과 같습니다. 

코드 복사

코드는 다음과 같습니다.

var 컨테이너 = 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) 

 
두 가지 방법 중 어느 것이 더 나은지 스스로 결정하세요. 
얼마 전에 요청을 했고 코드에서 또 다른 아이디어를 보았습니다. 이것이 제가 여기서 이야기하고 싶은 것입니다. CSS를 사용하여 상호 작용을 완료하는 것입니다. 
아직 코드: 
CSS 코드: 

코드 복사

코드는 다음과 같습니다.

#nav li.menu ul { display:block; } JS 코드는 대략 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

var el = document.getElementById("nav") el.addEventListener( "클릭", function(e) { var target = e.target.parentNode; if(target.tagName == "LI") { if(target.className == "") target.className = "메뉴";

　　}else {

　　　target.className = "";
　　}
　}
},

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

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

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