主页 / 问题 / 1049016
Accepted
Aleksandr
Asked:2020-11-21 23:36:55 +0000 UTC2020-11-21 23:36:55 +0000 UTC

单击下拉列表中的项目时如何更改文本？

  • 772

逻辑是这样的，当您单击列表项时，例如“Ufa”，此文本会出现在当前的位置，以及列表中的当前位置。

window.onclick = function(event) {
  if (!event.target.matches('.dropdown-toggle')) {
    let dropdownMenu = document.getElementsByClassName('dropdown-menu');

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

const dropdownToggle = document.querySelectorAll('.dropdown-toggle');

dropdownToggle.forEach(function(item) {
  item.onclick = function() {
    this.nextElementSibling.classList.toggle('show')
  };
});
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {background: orange;}
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  overflow: auto;
  z-index: 1;
}

.show {
  display: block;
}
<div class="dropdown">
  <div class="dropdown-toggle">Москва</div>

  <ul class="dropdown-menu">
    <li class="dropdown-item">Санкт-Петербург</li>
    <li class="dropdown-item">Уфа</li>
  </ul>
</div>

javascript

2 个回答

  1. Best Answer

    像这样试试

    document.addEventListener('click', (e) => {
	
    if(!e.target.matches('.dropdown-toggle')){
  	    const dropdownMenus = document.querySelectorAll('.dropdown-menu');

        dropdownMenus.forEach((menu) => {
            if (menu.classList.contains('show')){
                menu.classList.remove('show');
      	    }
        });
    }

});

const dropdownToggle = document.querySelectorAll('.dropdown-toggle');

dropdownToggle.forEach((item) => {
    item.addEventListener('click', (e) => {
        e.target.nextElementSibling.classList.toggle('show')
    });
});

const dropdownItems = document.querySelectorAll('.dropdown-item');

dropdownItems.forEach((item) => {
    item.addEventListener('click', (e) => {
            let self = e.target;
            let toggle = self.parentNode.parentNode.querySelector('.dropdown-toggle');
            const toggleText = toggle.innerText;
            toggle.innerText = self.innerText;
            self.innerText = toggleText;
    });
});
    .dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {background: orange;}
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  overflow: auto;
  z-index: 1;
}

.show {
  display: block;
}
    <div class="dropdown">
  <div class="dropdown-toggle">Москва</div>

  <ul class="dropdown-menu">
    <li class="dropdown-item">Санкт-Петербург</li>
    <li class="dropdown-item">Уфа</li>
  </ul>
</div>

    • 2

  2. 另外的选择

    var list = document.querySelector('.list');

list.addEventListener('click', showSublist);

function showSublist({
  target
}) {
  if (target.classList.contains('list__item__heading')) {
    var sublist = target.nextElementSibling;

    sublist.classList.toggle('hidden');
    sublist.addEventListener('click', changeCity);
  }
}

function changeCity({
  target
}) {
  if (target.classList.contains('sublist__item')) {
    var tmp = target.innerText;
    var heading = target.parentNode.parentNode.firstElementChild;

    target.innerText = heading.innerText;
    heading.innerText = tmp;
  }
}
    .hidden {
  display: none;
}

ul {
  font-size: 2rem;
}

li {
  cursor: pointer;
}
    <ul class="list">
  <li class="list__item">
    <h4 class="list__item__heading">Москва</h4>
    <ul class="sublist hidden">
      <li class="sublist__item">Астрахань</li>
      <li class="sublist__item">Уфа</li>
      <li class="sublist__item">Владивосток</li>
    </ul>
  </li>

  <li class="list__item">
    <h4 class="list__item__heading">Минск</h4>
    <ul class="sublist hidden">
      <li class="sublist__item">Могилев</li>
      <li class="sublist__item">Брест</li>
      <li class="sublist__item">Гродно</li>
    </ul>
  </li>
</ul>

    • 2

相关问题