집 >웹 프론트엔드 >JS 튜토리얼 >드롭다운 목록 기능을 구현하는 jquery+css 예제에 대한 자세한 설명

드롭다운 목록 기능을 구현하는 jquery+css 예제에 대한 자세한 설명

小云云원래의: 2017-12-29 11:18:291088검색

이 글은 예제 코드를 통해 jquery와 CSS를 결합하여 구현한 드롭다운 목록 기능을 소개합니다. 매우 훌륭하고 참고할만한 가치가 있으므로 모두에게 도움이 되기를 바랍니다.

더 이상 말도 안되는 코드를 게시하겠습니다. 구체적인 코드는 다음과 같습니다.

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

드롭다운 목록 기능을 구현하는 jquery+css 예제에 대한 자세한 설명

관련 기사