資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
廣告