-2주차 Jquery 적용하기-

- 포스팅박스 열기/닫기 만들어보기

 

<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스
    열기</a>

a onclick 부분이 잘 이해가 되지 않아 애를 먹어 구글링을 많이 했다.

그 결과 <a 코드는 원래는  하이퍼링크와 같이 쓰여 클릭하면 링크로 넘어가는 코드인데,

href="#"을 넣음으로써(하이퍼 링크에 경로설정x) onclick만 실행 하도록 만들어진 코드라는 것을 알게 되었다. (링크로 안넘어가고 클릭 효과만 구현)

 

 

*참고*

a태그를 href가 아닌 onclick()을 사용하고자 할 때 방법 두 가지를 소개한다.

 

1. href를 막고 onclick 사용

<a href="javacsript:void(0); onclick='함수명(매개변수)'>a링크입니다</a>

href가 동작은 하지만 void(0)으로 사실상 동작을 안 하는 것처럼 보이고 onclick이 실행된다.

 

 

2. href에 경로설정을 하지 않고 onclick 속성 사용

<a href="#" onclick="함수명(매개변수);">a링크</a>

이런 형식으로 사용한다.

 

출처 - http://egloos.zum.com/pdw213/v/3493140

출처 - http://0taeng.tistory.com/31

 

 

다시 돌아와서, onclick= "" 에 함수명을 입력해준다 onclick= "openclose()" (주의: 함수명에 값이 없더라도 빈괄호()로 표시)

그리고 <script></script>에 function을 입력해준다.

function openclose() {
    let status = $('#post-box').css('display')
    if (status == 'block') {
        $('#post-box').hide();
        $('#btn-posting-box').text("포스팅박스 열기");
    } else {
        $('#post-box').show();
        $('#btn-posting-box').text("포스팅박스 닫기");
    }

 

버튼 id에 .text로 포스팅닫기 열기도 지정해주면 끝!