Maison > Article > interface Web > Explication détaillée d'exemples de jquery+css implémentant la fonction de liste déroulante

Explication détaillée d'exemples de jquery+css implémentant la fonction de liste déroulante

小云云original: 2017-12-29 11:18:291046parcourir

Cet article vous présente la fonction de liste déroulante implémentée en combinant jquery et css via un exemple de code. Elle est très bonne et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Sans plus tarder, je publierai simplement le code pour vous. Le code spécifique est le suivant :

<!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中的内容为后续动态追加
  $(&#39;.selector&#39;).on(&#39;click&#39;, &#39;.selector-expand&#39;, function() {
    $(this).parent().children(&#39;.selector-option-container&#39;).children().remove();
    $(this).parent().children(&#39;.selector-option-container&#39;).append(&#39;<p><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></p><p class="selector-option">apricot</p>&#39;);
    $(this).parent().children(&#39;.selector-option-container&#39;).append(&#39;<p><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></p><p class="selector-option">banana</p>&#39;);
    $(this).nextAll(&#39;.selector-option-container&#39;).removeClass(&#39;hide&#39;);
  });
  $(&#39;.selector&#39;).on(&#39;click&#39;, &#39;.selector-collapse&#39;, function() {
    $(this).nextAll(&#39;.selector-option-container&#39;).addClass(&#39;hide&#39;);
  });
  $(&#39;.selector-t1&#39;).on(&#39;click&#39;, &#39;.selector-option&#39;, function() {
    $(this).parent().parent().children(&#39;.selector-hint&#39;).text($(this).text());
    $(this).parent().addClass(&#39;hide&#39;);
  });
  $(&#39;.selector-t1&#39;).on(&#39;click&#39;, &#39;.selector-checkbox&#39;, function() {
    $(this).parent().parent().parent().children(&#39;.selector-hint&#39;).text($(this).parent().next().text());
    //采用prop方法，对于值为布尔型的属性赋值
    $(this).prop(&#39;checked&#39;, false);
    $(this).parent().parent().addClass(&#39;hide&#39;);
  });
});
</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>

Recommandations associées :

Comment implémenter la fonction de liste déroulante dans l'applet WeChat

À propos de la sélection des boutons radio, des boutons à cocher et des listes déroulantes dans Vue. balises de formulaire js Explication détaillée de la valeur

Implémentation js native de la zone de liste déroulante

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!

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

Article précédent：Chargement asynchrone de zTree et extension de la mise en œuvre de la méthode de nœud de premier niveauArticle suivant：Chargement asynchrone de zTree et extension de la mise en œuvre de la méthode de nœud de premier niveau

Articles Liés

Voir plus