Jquery+HTML+CSS는 드롭다운 목록 기능을 구현합니다.

이번에는 드롭다운 목록 기능을 구현하기 위한 Jquery+HTML+CSS를 가져왔습니다. Jquery+HTML+CSS에서 드롭다운 목록 기능을 구현하기 위한 주의사항은 무엇인가요? 살펴보자.

nbsp;html>


<meta>
<title>fruit</title>
<style>
.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></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 class="selector-option">apricot&#39;);
    $(this).parent().children(&#39;.selector-option-container&#39;).append(&#39;<p><input type="checkbox" name="fruitGroup" class="selector-checkbox"/><p class="selector-option">banana&#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>


<p>
</p><p>
 </p><p>
  </p><p>select fruit</p>
  <p>+</p>
  <p>-</p>
  <p>
  </p>
 


<p>
</p><p>
 </p><p>
  </p><p>select fruit</p>
  <p>+</p>
  <p>-</p>
  <p>
  </p>
 

信 이 사례를 읽으신 후 이미 방법을 익히셨으리라 믿습니다. 더 흥미진진한 내용을 알고 싶으시다면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 자료:

jQuery는 페이지 마스크 레이어 효과를 생성합니다

jquery에서 키보드 이벤트를 사용하는 방법

jQuery는 웹페이지 하단까지 탐색할지 여부를 결정합니다

위 내용은 Jquery+HTML+CSS는 드롭다운 목록 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!