18. JavaScript Ex.17 div, span 태그 펼치기/접기

본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.

예제풀이

블로그나 어디 홈페이지 등을 가게되면 쉽게 볼 수 있는 펼치기/접기 기능이 있다.

<div>태그와 <span>태그를 선언하여 간단하게 구현하였다.

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <span>item 1</span>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Neque minus ratione culpa omnis tempore illum laudantium obcaecati 
quo incidunt in officia vel id commodi quos ipsam delectus fugit doloribus sequi.</div>
    <span>item 2</span>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Neque minus ratione culpa omnis tempore illum laudantium obcaecati
 quo incidunt in officia vel id commodi quos ipsam delectus fugit doloribus sequi.</div>
    <span>item 3</span>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Neque minus ratione culpa omnis tempore illum laudantium obcaecati
 quo incidunt in officia vel id commodi quos ipsam delectus fugit doloribus sequi.</div>
    <span>item 4</span>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Neque minus ratione culpa omnis tempore illum laudantium obcaecati 
quo incidunt in officia vel id commodi quos ipsam delectus fugit doloribus sequi.</div>
    <span>item 5</span>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Neque minus ratione culpa omnis tempore illum laudantium obcaecati 
quo incidunt in officia vel id commodi quos ipsam delectus fugit doloribus sequi.</div>
</body>
Colored by Color Scripter
cs

<body>

먼저 span태그와 div태그를 선언하고

div태그 내에는 emmet을 이용한 랜덤 문자열을 삽입하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.spanbox {
    display: block;
    border: solid 1px gray;
    width: 300px;
    border: solid 1px gray;
}
 
div {
    border: solid 1px gray;
    width: 300px;
    background-color: aqua;
    display: none;
}
 
.showhide {
    display: block;
}
</style>
cs

<style>

먼저 div태그를 기본적으로 display 속성을 none을 주어서

처음 윈도우가 로드되었을때는 안보이도록 하였다.

.showhide는 추후에 펼치기 작업을 위한 스타일 선언이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    var spanlist = document.getElementsByTagName("span");
    var a = true;
    //spanlist.classList.add("spanbox");
    for (var i = 0; i < spanlist.length; i++) {
        spanlist[i].classList.add("spanbox");            
        spanlist[i].onclick = function() {
            if (a) {
                this.nextElementSibling.classList.toggle("showhide", true);
                // nextElementSibling / 다음 node를 가져옴
                a = false;
            } else {
                this.nextElementSibling.classList.toggle("showhide", false);
                a = true;
            }
 
        }
 
    }
    var divlist = document.getElementsByTagName("div");
</script>
Colored by Color Scripter
cs

getElementsByTagName("span")을 이용하여 태그이름이 span인것을 spanlist 변수에 저장하였다.

그리고 변수 a에 기본값 true를 넣었다.

변수의 길이만큼 for문을 돌리고, 각각 span태그에 클래스명과 onclick이벤트를 추가한다.

변수 a는 true값이 들어가있기에, 조건문을 통하여 처음 발생하게 될 경우

nextElementSibling.classList.toggle("showhide",true)를 통하여 display속성을 block을 준다.

※ this.nextElementSibling 란?

span태그의 다음요소를 말하는 것이고,

classList의 toggle함수를 이용하여 true일경우 class명을 추가하고, false일경우 class명을 삭제한다.

두번 누르게 될경우 class명을 삭제하여 다시 display:none속성을 부여받아 안보이게 된다.

<실행결과>

저작자표시 비영리 변경금지 (새창열림)

'이전 글 > JavaScript' 카테고리의 다른 글

20. JavaScript Ex.19 마우스 이벤트 처리 (0)	2018.01.21
19. JavaScript Ex.18 맨 위로 가기(TOP)/상단바 고정 (0)	2018.01.21
17. JavaScript Ex.16 DOM(Document Object Model)-2 (0)	2018.01.18
16. JavaScript Ex.15 DOM(Document Object Model) (0)	2018.01.18
15. JavaScript Ex.14 로또번호 발생기 (0)	2018.01.18

'이전 글 > JavaScript' 카테고리의 다른 글

검색 태그

티스토리툴바