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>
 

                                        

#上建立中文案例中與你已經掌握了更多方法，更多它請關注中文相關文章！

推薦閱讀：

jQuery做出頁面遮罩層效果

在jquery怎麼使用鍵盤事件

jQuery判斷是否要瀏覽到網頁底部

#

以上是Jquery+HTML+CSS實作下拉清單功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！