w3.css

닫을 수 있는 목록 항목

JavaScript로 목록 항목을 닫는 방법을 알아보자.

닫을 수 있는 목록 항목을 만드는 방법

목록 항목 오른쪽에 있는 “x” 기호를 클릭하면 목록 항목이 닫히거나 숨겨진다.

1단계) HTML 추가

<ul>
  <li>Adele</li>
  <li>Agnes<span class="close">x</span></li>

  <li>Billy<span class="close">x</span></li>
  <li>Bob<span class="close">x</span></li>

  <li>Calvin<span class="close">x</span></li>
  <li>Christina<span class="close">x</span></li>
  <li>Cindy</li>
</ul>

2단계) CSS 추가

* {
  box-sizing: border-box;
}

/* Style the list (remove margins and bullets, etc) */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Style the list items */
ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
}

/* Add a light grey background color on hover */
ul li:hover {
  background-color: #eee;
}

/* Style the close button (span) */
.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}

.close:hover {background: #bbb;}

3단계) ​​JavaScript 추가

// Get all elements with class="close"
var closebtns = document.getElementsByClassName("close");
var i;

// Loop through the elements, and hide the parent, when clicked on
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기