Maison > Article > interface Web > HTML, CSS et jQuery : créez un menu déroulant à sélection multiple avec des cases à cocher
HTML, CSS et jQuery : créez un menu déroulant à sélection multiple avec des cases à cocher
- PHPzoriginal
- 2023-10-27 14:22:591622parcourir
HTML, CSS et jQuery : créez un menu déroulant à sélection multiple avec des cases à cocher
Avec le développement continu d'Internet, la conception Web et l'expérience interactive deviennent de plus en plus importantes. Dans le passé, l'utilisation de clics de souris pour effectuer des sélections était une méthode d'interaction courante. Cependant, avec la diversification des besoins des utilisateurs, nous avons besoin de méthodes d'interaction plus flexibles et plus intelligentes. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un menu déroulant à sélection multiple avec des cases à cocher.
Tout d'abord, nous devons créer une structure HTML de base contenant une zone de sélection et plusieurs options. Le code est le suivant :
<!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>Ensuite, nous devons utiliser CSS pour embellir le menu déroulant. Ajoutez le code suivant dans le fichier 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;
}Dans le code ci-dessus, nous avons utilisé certains styles CSS de base pour masquer et afficher le menu déroulant, ainsi que pour modifier la couleur d'arrière-plan de l'option sélectionnée.
Maintenant, nous devons utiliser jQuery pour implémenter le comportement interactif du menu déroulant. Ajoutez le code suivant dans le fichier 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);
});
});Dans ce code JavaScript, nous utilisons l'événement toggle()方法来切换下拉菜单的显示和隐藏。同时，我们还监听了复选框的change de jQuery pour mettre à jour automatiquement le contenu du texte sur le bouton lorsque l'option est sélectionnée ou décochée.
Enfin, nous devons télécharger et introduire la bibliothèque jQuery et enregistrer les trois fichiers ci-dessus dans le même dossier.
En combinant le HTML, CSS et jQuery ci-dessus, nous pouvons facilement créer un menu déroulant à sélection multiple avec des cases à cocher. Un tel menu déroulant offrira aux utilisateurs une expérience de sélection plus flexible et plus pratique et améliorera l'interactivité de la page Web.
Résumé : Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons facilement créer une variété d'éléments de page Web hautement interactifs. Un exemple de ceci est un menu déroulant à sélection multiple qui offre un moyen de sélection plus flexible et plus intelligent. J'espère que l'exemple de code contenu dans cet article pourra vous être utile et vous aider à obtenir une meilleure expérience interactive dans la conception Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!