我试图让我的选项列表隐藏，直到下拉菜单按钮已被单击，并为它再次隐藏，一旦它已被单击，然而，它是不工作的。这里是我的代码。请让我知道我可以做什么来修复它
我的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Cocktail App</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/recipe.css">
<script src="recipe.js"></script>
</head>
<body>
<h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
<div class="container">
<button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
<div id="myDropdown" class="search-container">
<input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
<a href="#">Margarita</a>
<a href="#>Mojito</a>
<a href="#">Long Island tea</a>
<a href="#">Whiskey Sour</a>
</div>
</div>
<div id="result"></div>
</div>
</body>
</html>
My javascript :
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var dropDown = document.getElementById("myDropdown");
var link = dropDown.getElementsByTagName("a");
for (i = 0; i < link.length; i++) {
textValue = link[i].textContent || link[i].innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
link[i].style.display = "";
} else {
link[i].style.display = "none";
}
}
}
3条答案
按热度按时间1zmg4dgp1#
首先尝试在#后面添加缺少的引号，in：
<a href="#>Mojito</a>，然后看看它是否工作。并从标记中删除“java”，因为这不是java，而是javascript：）
xesrikrc2#
您需要一些CSS来定义类“show”，例如在HTML
<head>中添加以下内容：注意，我为了语义把类名改成了“hidden”而不是“show”。这样，当一个元素有类“hidden”时，它就不会显示出来。
现在相应地更改Javascript，以便添加和删除“hidden”类：
4xrmg8kj3#
我看不到你的css，但是你的
.show类需要定义。在你的样式表中添加以下内容：工作中：
第一个