Maison > Article > interface Web > Jquery+HTML+CSS implémente la fonction de liste déroulante
Jquery+HTML+CSS implémente la fonction de liste déroulante
- php中世界最好的语言original
- 2018-04-19 15:37:001651parcourir
Cette fois, je vous propose Jquery+HTML+CSS pour implémenter la fonction liste déroulante Quelles sont les précautions pour que Jquery+HTML+CSS implémente la fonction. fonction de liste déroulante ? Les éléments suivants sont C'est un cas pratique, jetons-y un coup d'œil.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fruit</title>
<style type="text/css">
.hide {
display: none;
}
p {
float: left;
width: 100%;
}
.selector-containter {
margin-bottom: 10px;
}
.selector {
width: 200px;
background: #FFF;
border: 1px solid #DDD;
}
.selector-hint {
width: 178px;
border: 1px solid #DDD;
}
.selector-expand {
width: 8px;
border: 1px solid #DDD;
}
.selector-collapse {
width: 8px;
border: 1px solid #DDD;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
//使用on方法，采用事件委派机制，selector-option-container中的内容为后续动态追加
$('.selector').on('click', '.selector-expand', function() {
$(this).parent().children('.selector-option-container').children().remove();
$(this).parent().children('.selector-option-container').append('<p><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></p><p class="selector-option">apricot</p>');
$(this).parent().children('.selector-option-container').append('<p><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></p><p class="selector-option">banana</p>');
$(this).nextAll('.selector-option-container').removeClass('hide');
});
$('.selector').on('click', '.selector-collapse', function() {
$(this).nextAll('.selector-option-container').addClass('hide');
});
$('.selector-t1').on('click', '.selector-option', function() {
$(this).parent().parent().children('.selector-hint').text($(this).text());
$(this).parent().addClass('hide');
});
$('.selector-t1').on('click', '.selector-checkbox', function() {
$(this).parent().parent().parent().children('.selector-hint').text($(this).parent().next().text());
//采用prop方法，对于值为布尔型的属性赋值
$(this).prop('checked', false);
$(this).parent().parent().addClass('hide');
});
});
</script>
</head>
<body>
<p id="titan" class="selector-containter">
<p id="fruit">
<p class="selector">
<p class="selector-hint">select fruit</p>
<p class="selector-expand">+</p>
<p class="selector-collapse">-</p>
<p class="selector-option-container">
</p>
</p>
</p>
</p>
<p id="athena" class="selector-t1 selector-containter">
<p id="fruit">
<p class="selector">
<p class="selector-hint">select fruit</p>
<p class="selector-expand">+</p>
<p class="selector-collapse">-</p>
<p class="selector-option-container">
</p>
</p>
</p>
</p>
</body>
</html>
Lecture recommandée :
JQuery crée un effet de calque de masque de pageComment utiliser les événements de clavier dans jqueryjQuery détermine s'il faut naviguer vers le bas de la page WebCe 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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn