JQuery(버튼 클릭시 열고 닫기)

SONA·2021년 11월 8일
0

Javascript

목록 보기
4/9

포스팅 박스 열기 버튼에 function을 달기

<script>
function openclose() {
	// 여기에 jQuery를 이용해 코드를 짤 예정    
}
</script>

// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

포스팅 박스에 id 값 주기

<div class="form-post" id="post-box">
    <div>
        <div class="form-group">
            <label for="exampleFormControlInput1">아티클 URL</label>
            <input class="form-control" placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" rows="2"></textarea>
        </div>
        <button type="button" class="btn btn-primary">기사저장</button>
    </div>
</div>

포스팅 박스 제어하기(열고 닫기)

* 파이참에서 alert('~')으로 잘되는지 확인하면서 하면 좋음
* 크롬 콘솔 로그에서 $('#id').css('display') 입력시 값 확인 가능
* style에서 해당 id에 'display:none;'을 작성해주면 처음부터 닫혀있음(안보임)
<script>

        function openclose() {
            let status = $('#box').css('display');
  			console.log(status); //콘솔창에 로그를 남기며, 확인했으면 삭제하기
            if (status == 'block') {
                $('#box').hide();
                $('#btn-posting-box').text('포스팅박스 열기');
            } else {
                $('#box').show();
                $('#btn-posting-box').text('포스팅박스 닫기');
            }
        }

</script>

0개의 댓글