Как менять текст при клике в dropdown списке?

Question

[Александр Янк]

Логика такая, при клике на пункт списка, например "About" этот текст оказывался на месте текущего, а текущий в списке.

Вот кодПен https://codepen.io/alex-lenk/pen/KKKEBar

window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        let dropdowns = document.getElementsByClassName('dropdown-content');

        for (let i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

const dropbtn = document.querySelectorAll('.dropbtn');

dropbtn.forEach(function(item){
  item.onclick = function(){
      this.nextElementSibling.classList.toggle('show')
  };
})

<div class="dropdown">
  <button class="dropbtn">Home</button>

  <div class="dropdown-content">
    <div>blog</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>



<div class="dropdown">
  <button class="dropbtn">Home</button>

  <div class="dropdown-content">
    <div>blog</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>

.dropbtn {
  background-color: #3498db;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
}

.show {
  display: block;
}

body {
display: flex;
justify-content: space-around;
}

Answer 1

[0xD34F]

Логика такая, при клике на пункт списка, например "About" этот текст оказывался на месте текущего, а текущий в списке.

Какая дичь. Вы понимаете, что после нескольких кликов порядок пунктов может оказаться полностью изменённым? Пользователь запомнил, что такой-то пункт внизу, ищет там - а нет его, наверх уехал. Может, просто скрывать выбранный пункт?

Ну а так-то всё просто. Добавьте пунктам какой-нибудь класс, dropdown-menu-item, например. И код в обработчик клика:

const item = event.target.closest('.dropdown-menu-item');
if (item) {
  const btn = item.closest('.dropdown').querySelector('.dropdown-toggle');
  [ btn.textContent, item.textContent ] = [ item.textContent, btn.textContent ];
}