1

我正在尝试基于 w3schools searchable dropdown构建一个下拉列表。我的下拉列表有 3 个项目。单击其中一个时，我想根据单击的选项显示新选项（替换旧选项）。我该怎么办？此外，滑动动画——滑入的新选项——会很棒。

知道如何开始这样的事情吗？

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
/* The container <div> - needed to position the dropdown content */

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


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}
<div class="dropdown">
  <input type="text" placeholder="Search.." id="myInput" onclick="myFunction()" class="dropbtn" onkeyup="filterFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a href="#about">Expense:</a>
    <a href="#base">Income:</a>
    <a href="#blog">Transfer:</a>
  </div>
</div>

4

1 回答 1

1

这可以通过多种方式完成。

还要记住，这类问题在这里不太受欢迎，它需要更多的关注，你应该尝试一些东西，然后当你遇到代码的某些部分时寻求帮助。

这是如何做到这一点的基本示例，它应该足以让您了解如何开始并根据您的需要完善它：

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

document.querySelectorAll('#myDropdown a').forEach(item => {
//get all links from menu
  item.addEventListener('click', function() {
  // add Event Listener to each
    document.querySelectorAll("." + this.id).forEach(menuOption => {
      menuOption.classList.add("slide-in")
      // on click get item id and use it to add class to elements with same class
    });
  });
});
/* Sub menu options */

.options {
  display: none;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.slide-in {
  display: block !important;
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateY(0%);
  }
}


/* The container <div> - needed to position the dropdown content */

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


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}
<div class="dropdown">
  <input type="text" placeholder="Search.." id="myInput" onclick="myFunction()" class="dropbtn" onkeyup="filterFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a href="#about" id="expense">Expense:</a>
    <div class="options expense">Expense Option 1</div>
    <div class="options expense">Expense Option 2</div>
    <div class="options expense">Expense Option 3</div>
    <a href="#base" id="income">Income:</a>
    <div class="options income">Income Option 1</div>
    <div class="options income">Income Option 2</div>
    <div class="options income">Income Option 3</div>
    <a href="#blog" id="transfer">Transfer:</a>
    <div class="options transfer">Transfer Option 1</div>
    <div class="options transfer">Transfer Option 2</div>
    <div class="options transfer">Transfer Option 3</div>
  </div>
</div>

于 2020-10-11T18:26:03.617 回答