2023-06-22 쪽지 더보기 란(toggle)

쪽지 html

 

1. OpenNote라는 함수를 사용 쪽지함들을 전부 쪽지라는 버튼에 추가해서 더보기란을 만들 예정

2. 일단 이렇게 html을 만들었다.

<li class="nav-item disable" >
                    <a href="#" onclick="OpenNote()"><div id="create-note"style="display: none;">쪽지</div></a>
                <li class="nav-item disable" id="note-container">
                  <a href="#" onclick="OpenNote()"><div id="create-note">쪽지</div></a>
                  <ul class="nav-note" >
                      <li class="articles-container">  
                      <a href="/user/message_inbox.html">받은 쪽지함</a>
                      </li>
                      <li class="articles-container">
                      <a href="/user/message_sent.html">보낸 쪽지함</a>
                      </li>
                      <li class="articles-container">
                      <a href="/user/message_create.html">쪽지 보내기</a>
                      </li>
                  </ul>
                </li>

 

 

쪽지 JS

1. noteContainer 변수를 선언하고, .nav-note 클래스를 가진 요소를 찾아 할당

2.noteContainer의 style.display 속성이 "block"인지 확인 (로그인이 안되어있을경우 쪽지함을 열수 없게 설정)

function OpenNote() {
  var noteContainer = document.querySelector(".nav-note");
  if (noteContainer.style.display === "block") {
    noteContainer.style.display = "none";
  } else {
    noteContainer.style.display = "block";
  }
}

 

쪽지 CSS

1. id값을 #으로 나타낸다. 

#note-container {

    position: relative;
  
  }
  
  .nav-note {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 200px;
    transform: translateX(-60%);
    display: none;
  
  }