Rumah > Artikel > hujung hadapan web > HTML, CSS dan jQuery: Buat menu lungsur turun berbilang pilihan dengan kotak pilihan
HTML, CSS dan jQuery: Buat menu lungsur turun berbilang pilihan dengan kotak pilihan
- PHPzasal
- 2023-10-27 14:22:591736semak imbas
HTML, CSS dan jQuery: Buat menu lungsur turun berbilang pilihan dengan kotak pilihan
Dengan pembangunan berterusan Internet, reka bentuk web dan pengalaman interaktif menjadi semakin penting. Pada masa lalu, menggunakan klik tetikus untuk membuat pilihan adalah kaedah interaksi yang biasa Walau bagaimanapun, dengan kepelbagaian keperluan pengguna, kami memerlukan kaedah interaksi yang lebih fleksibel dan bijak. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membuat menu lungsur turun berbilang pilihan dengan kotak pilihan.
Pertama, kita perlu mencipta struktur HTML asas yang mengandungi kotak pilihan dan beberapa pilihan. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>多选下拉菜单</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">选择项</button>
<div class="dropdown-content">
<input type="checkbox" id="item1" name="item1" value="item1">
<label for="item1">选项1</label><br>
<input type="checkbox" id="item2" name="item2" value="item2">
<label for="item2">选项2</label><br>
<input type="checkbox" id="item3" name="item3" value="item3">
<label for="item3">选项3</label><br>
</div>
</div>
</body>
</html>Seterusnya, kita perlu menggunakan CSS untuk mencantikkan menu drop-down. Tambahkan kod berikut dalam fail style.css:
/* 隐藏下拉菜单 */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
}
/* 隐藏复选框 */
.dropdown-content input[type="checkbox"] {
display: none;
}
/* 样式化下拉菜单按钮 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 鼠标移动到下拉菜单上时显示选项 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 选中选项时改变背景颜色 */
.dropdown-content input[type="checkbox"]:checked + label {
background-color: #ccc;
}Dalam kod di atas, kami telah menggunakan beberapa gaya CSS asas untuk menyembunyikan dan menunjukkan menu lungsur, serta menukar warna latar belakang pilihan yang dipilih.
Kini, kita perlu menggunakan jQuery untuk melaksanakan gelagat interaktif menu lungsur. Tambahkan kod berikut dalam fail script.js:
$(document).ready(function() {
// 点击按钮时显示或隐藏下拉菜单
$(".dropbtn").click(function() {
$(".dropdown-content").toggle();
});
// 当有选项被选中或取消选中时，更新按钮文本
$(".dropdown-content input[type='checkbox']").change(function() {
var selectedItems = [];
$(".dropdown-content input[type='checkbox']:checked").each(function() {
selectedItems.push($(this).next("label").text());
});
var buttonText = selectedItems.join(", ");
if(buttonText === "") {
buttonText = "选择项";
}
$(".dropbtn").text(buttonText);
});
});Dalam kod JavaScript ini, kami menggunakan acara toggle()方法来切换下拉菜单的显示和隐藏。同时，我们还监听了复选框的change jQuery untuk mengemas kini kandungan teks pada butang secara automatik apabila pilihan dipilih atau dinyahtanda.
Akhir sekali, kami perlu memuat turun dan memperkenalkan perpustakaan jQuery dan menyimpan tiga fail di atas dalam folder yang sama.
Dengan menggabungkan HTML, CSS dan jQuery di atas, kami boleh membuat menu lungsur turun berbilang pilihan dengan kotak pilihan dengan mudah. Menu lungsur sedemikian akan memberikan pengguna pengalaman pemilihan yang lebih fleksibel dan mudah serta meningkatkan interaktiviti halaman web.
Ringkasan: Melalui gabungan HTML, CSS dan jQuery, kami boleh mencipta pelbagai elemen halaman web yang sangat interaktif dengan mudah. Salah satu contoh ini ialah menu lungsur turun berbilang pilihan yang menyediakan cara yang lebih fleksibel dan bijak untuk memilih. Saya harap kod sampel dalam artikel ini boleh membantu anda dan membantu anda mencapai pengalaman interaktif yang lebih baik dalam reka bentuk web.
Atas ialah kandungan terperinci HTML, CSS dan jQuery: Buat menu lungsur turun berbilang pilihan dengan kotak pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!