个人中心
gpt4 book ai didi

javascript - 下拉菜单的关闭列表

转载 作者：行者123 更新时间：2023-11-30 14:21:47 25 4
gpt4 key购买 nike

我有这个下拉菜单:

document.addEventListener("DOMContentLoaded", function(event) {
  allNameMuseums().forEach(function(item) { // ITERAZIONE
    document.getElementById("myDropdown").innerHTML += '<a onclick="updateData(this)">' + item + '</a>';
  })
});

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Museo1</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
  </div>
</div>

我希望当我单击下拉菜单列表中的项目时，列表会自动关闭。

最佳答案

您需要的是从元素中删除“show”类。

例子:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }
.dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; }
#myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; }
#myInput:focus { outline: 3px solid #ddd; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown a:hover { background-color: #ddd; }
.show { display: block; }
</style>
</head>
<body>

<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu [...]</p>

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about" onclick="select()">Item1</a>
    <a href="#base" onclick="select()">Item2</a>
  </div>
</div>

<script>

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++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

function select() {
  //Your item selection logic here...
  myFunction();
}

</script>

</body>
</html>

关于javascript - 下拉菜单的关闭列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52627960/

25 4 0
文章推荐： c# - 如何通过 NuGet 包共享源代码以用于 .NET Core 项目
文章推荐： javascript - 带有 .hide() 函数的 Jquery 代码在 Django 模板中不起作用
文章推荐： javascript - 如何让这段代码一次移动一个类(class)
文章推荐： javascript - 如何在 Vue CLI 3.04 上使用 sass-resource-loader 为所有 Vue 组件加载 _variables.scss 文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com