Home > Article > Web Front-end > Detailed explanation of examples of jquery+css implementing drop-down list function

Detailed explanation of examples of jquery+css implementing drop-down list function

小云云Original: 2017-12-29 11:18:291022browse

This article introduces you to the drop-down list function implemented by combining jquery and css through example code. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Without further ado, I will post the code directly for you. The specific code is as follows:

<!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>

Related recommendations:

How to implement the WeChat applet display drop-down list function

Detailed explanation of the values of radio buttons, check buttons and drop-down lists in Vue.js form tags

Native js implementation of drop-down list box

The above is the detailed content of Detailed explanation of examples of jquery+css implementing drop-down list function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：zTree asynchronously loads and expands the first level node method implementationNext article：zTree asynchronously loads and expands the first level node method implementation

See more

Detailed explanation of examples of jquery+css implementing drop-down list function

Related articles