다국어 버튼

<div class="container">
  <div class="dropdown">
    <div class="dropdown-btn">
      <i class="ri-global-line"></i>KOR
    </div>
    <div class="dropdown-content">
      <div class="dropdown-item" data-value="1">
        <a href="#">KOR</a>
      </div>
      <div class="dropdown-item" data-value="2">
        <a href="#">ENG</a>
      </div>
      <div class="dropdown-item" data-value="2">
        <a href="#">CN</a>
      </div>
    </div>
  </div>
</div>

 

<script type="text/javascript">
const dropdown = document.querySelector(".dropdown");
const dropdown_btn = document.querySelector(".dropdown-btn");
const dropdown_content = document.querySelector(".dropdown-content");
const dropdown_item = document.querySelectorAll(".dropdown-item");
const arrow = document.querySelector(".fas");

document.addEventListener("click", function (e) {
if (e.target == dropdown_btn) {
  return;
} else {
  if (dropdown_content.classList.contains("active")) {
    dropdown_content.classList.remove("active");
    dropdown_btn.classList.remove("active");
    dropdown_btn.classList.remove("active");
    arrow.classList.remove("fa-chevron-up");
  }
}
});

dropdown.addEventListener("click", function () {
this.classList.toggle("active");
dropdown_content.classList.toggle("active");
dropdown_btn.classList.toggle("active");
arrow.classList.toggle("fa-chevron-up");
});

for (let i = 0; i < dropdown_item.length; i++) {
dropdown_item[i].addEventListener("click", function () {
  dropdown_btn.getElementsByTagName("p")[0].textContent = this.textContent;
  console.log(this.dataset.value);
});
}

</script>

 

.container { min-width: 85px;margin: 0px 15px 0px 30px; } 
.dropdown { width: 100%; user-select: none; position: relative; } 
.dropdown .dropdown-btn {height: 25px; text-align: center; color: #fff; border-bottom: 1px solid transparent; border-radius: 35px; font-weight: 400; cursor: pointer;display: flex;align-items: center;justify-content: center; } 
.dropdown .dropdown-btn > p { display: inline-block; position: relative; margin-right:6px; text-align: center; user-select: none; pointer-events: none;font-size: 12px; } 
.dropdown .dropdown-btn i { color: #fff; pointer-events: none;font-size: 18px;margin-right: 4px; } 
.dropdown .dropdown-btn.active {}
.dropdown .dropdown-content { position: absolute; top: 100%; left: 0; font-weight: 500; color: #333; width: 100%; overflow: hidden; display: none; } 
.dropdown .dropdown-content .dropdown-item { cursor: pointer; transition: all 0.2s; text-align: center;border-radius: 35px;background: #eee;height: 25px;margin-top: 4px;line-height: 25px; } 
.dropdown .dropdown-content .dropdown-item a {font-size: 12px;color: #333; } 
.dropdown .dropdown-content .dropdown-item:not(:last-child) { /* border-bottom: 1px solid #707070; */}
.dropdown .dropdown-content .dropdown-item:hover { background: var(--color); color: #fff; } 
.dropdown .dropdown-content .dropdown-item:hover a {color: #fff; } 
.dropdown .dropdown-content.active { display: block; }