메뉴 아코디언 표현하기

여러가지 아코디언액션을 적용하는 방법이 잇는데

CSS 클래스로 컨트롤 하는 방식이 가장 좋은 방법인 것 같다.

 

[html]

 

onclick="toggleClass( this.parentNode, 'fold')"

 

 

클릭시 부모에 fold라는 클래스를 토글하고 싶을때 (추가/제거) this에 parentNode 붙여준다.

 

 

 

[vanilla javascript]

 

// 아코디언

var toggleClass = function (element, tClass) {

tClass = tClass.replace(/\s/g, "");

var classes = element.className;

element.className = classes.indexOf(tClass) !== -1

? classes.replace(" " + tClass, "")

: classes + " " + tClass;

}

 

 

 

자바스크립트에서 replaceAll 은 없다. 정규식을 이용하여 대상 스트링에서 모든 부분을 수정해 줄 수 있다

 

\S : 공백 문자를 제외한 문자

g : 글로벌의 뜻. 전역 매칭을 한다. 처음 부터가 아닌 전체에서 정규식이 맞는걸 찾는다.

 

className 사용법 아래 사이트 참고

https://tonks.tistory.com/44

 

 

indexOf() 메서드는 호출한 String 객체에서 특정 값의 첫 번째 일치하는 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.https://www.w3schools.com/jsref/jsref_indexof.asp