数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在搜索按钮时自动打开详细信息菜单？
按钮是 HTML 中可点击的元素，用于执行操作。它们可以提交表单、重置表单或执行 JavaScript 函数。它们由<button> 或<input> 标签定义。使用 <button> 标签创建的按钮可以包含内容，例如文本、图标、图像等等。
<input> 标签为用户指定了一个数据输入字段。<input> 元素是最重要的表单元素。根据 type 属性的不同，它可以以多种方式显示。文本是最常见和使用最广泛的输入类型。
考虑以下代码，其中包含一个搜索栏，用于在详细信息菜单中搜索按钮元素。在执行搜索之前，我们必须手动点击/打开详细信息菜单。
示例
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Search bar for button elements </title>
<style>
#container {
width: 250px;
height: 90px;
background-color: bisque;
padding: 20px;
}
button {
margin-right: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id= "container">
<input type= "text" id= "search_bar" onkeyup= "searchfunction()" placeholder= "Search.." title= "Type in a category">
<div>
<details id= "search" class= "finding-section">
<summary id= "summary"> Colours </summary>
<button class= "finding-button" id= "violet"> Violet </button>
<button class= "finding-button" id= "indigo"> Indigo </button>
<button class= "finding-button" id= "blue"> Blue </button>
<button class= "finding-button" id= "green"> Green </button>
<button class= "finding-button" id= "yellow"> Yellow </button>
<button class= "finding-button" id= "orangered"> Orangered </button>
</details>
</div>
</div>
<script>
const searchbar = document.getElementById('search_bar');
searchbar.addEventListener('keyup', (event) => {
const searchKey = event.target.value;
const nodes = document.querySelectorAll('.finding-button');
nodes.forEach(node => {
node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
})
})
</script>
</body>
</html>
我们可以看到，在执行搜索之前，我们必须手动点击/打开详细信息菜单。现在，我们将介绍如何编写代码，使详细信息菜单在搜索时自动打开。
使用“open”属性
HTML 中的 open 属性用于指定页面加载时是否显示详细信息。这是一个布尔属性。默认情况下，如果不存在，则不显示详细信息。
语法
<details open> --content-- </details>
示例
在这个例子中，我们将在 details 标签中添加 open 属性，以便默认显示详细信息。
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Search bar for button elements </title>
<style>
#container {
width: 250px;
height: 90px;
background-color: darkcyan;
padding: 20px;
font-size: 17px;
font-weight: bold;
}
button {
margin-right: 10px;
margin-top: 10px;
background-color: aliceblue;
color: slategray;
font-weight: bold;
border: 0;
}
input {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id= "container">
<input type= "text" id= "search_bar" onkeyup= "searchfunction()" placeholder= "Search.." title= "Type in a category">
<div>
<details id= "search" class= "finding-section" open>
<summary id= "summary"> Colours </summary>
<button class= "finding-button" id= "violet"> Violet </button>
<button class= "finding-button" id= "indigo"> Indigo </button>
<button class= "finding-button" id= "blue"> Blue </button>
<button class= "finding-button" id= "green"> Green </button>
<button class= "finding-button" id= "yellow"> Yellow </button>
<button class= "finding-button" id= "orangered"> Orangered </button>
</details>
</div>
</div>
<script>
function searchfunction() {
const searchbar = document.getElementById('search_bar');
searchbar.addEventListener('keyup', (event) => {
const searchKey = event.target.value;
const nodes = document.querySelectorAll('.finding-button');
nodes.forEach(node => {
node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
})
})
}
</script>
</body>
</html>
示例
我们可以在 keyup 处理程序中检查我们的详细信息是否具有 open 属性，如果未设置则添加它。
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Search bar for button elements </title>
<style>
#container {
width: 250px;
height: 90px;
background-color: midnightblue;
padding: 20px;
font-size: 17px;
font-weight: bold;
color: white;
}
button {
margin-right: 10px;
margin-top: 10px;
background-color: white;
color: dodgerblue;
font-weight: bold;
border: 0;
}
input {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id= "container">
<input type= "text" id= "search_bar" onkeyup= "searchfunction()" placeholder= "Search.." title= "Type in a category">
<div>
<details id= "search" class= "finding-section" open>
<summary id= "summary"> Colours </summary>
<button class= "finding-button" id= "violet"> Violet </button>
<button class= "finding-button" id= "indigo"> Indigo </button>
<button class= "finding-button" id= "blue"> Blue </button>
<button class= "finding-button" id= "green"> Green </button>
<button class= "finding-button" id= "yellow"> Yellow </button>
<button class= "finding-button" id= "orangered"> Orangered </button>
</details>
</div>
</div>
<script>
function searchfunction() {
const searchbar = document.getElementById('search_bar');
searchbar.addEventListener('keyup', (event) => {
const searchKey = event.target.value;
const details = document.getElementById('search');
if (!details.hasAttribute('open')) {
details.setAttribute('open', true);
}
if(searchKey== ' '){
details.removeAttribute('open');
}
const nodes = document.querySelectorAll('.finding-button');
nodes.forEach(node => {
node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
})
})
}
</script>
</body>
</html>
更新于: 2023年9月12日
71 次浏览
广告