jquery+css實現(xiàn)下拉列表功能
更新時間:2017年09月03日 11:46:03 作者:佛哥
本文通過實例代碼給大家介紹了jquery 與css相結(jié)合實現(xiàn)的下拉列表功能,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
廢話不多說了,直接給大家貼代碼了,具體代碼如下所述:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>fruit</title> <style type="text/css"> .hide { display: none; } div { 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中的內(nèi)容為后續(xù)動態(tài)追加 $('.selector').on('click', '.selector-expand', function() { $(this).parent().children('.selector-option-container').children().remove(); $(this).parent().children('.selector-option-container').append('<div><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></div><div class="selector-option">apricot</div>'); $(this).parent().children('.selector-option-container').append('<div><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></div><div class="selector-option">banana</div>'); $(this).nextAll('.selector-option-container').removeClass('hide'); }); $('.selector').on('click', '.selector-collapse', function() { $(this).nextAll('.selector-option-container').addClass('hide'); }); $('.selector-t1').on('click', '.selector-option', function() { $(this).parent().parent().children('.selector-hint').text($(this).text()); $(this).parent().addClass('hide'); }); $('.selector-t1').on('click', '.selector-checkbox', function() { $(this).parent().parent().parent().children('.selector-hint').text($(this).parent().next().text()); //采用prop方法,對于值為布爾型的屬性賦值 $(this).prop('checked', false); $(this).parent().parent().addClass('hide'); }); }); </script> </head> <body> <div id="titan" class="selector-containter"> <div id="fruit"> <div class="selector"> <div class="selector-hint">select fruit</div> <div class="selector-expand">+</div> <div class="selector-collapse">-</div> <div class="selector-option-container"> </div> </div> </div> </div> <div id="athena" class="selector-t1 selector-containter"> <div id="fruit"> <div class="selector"> <div class="selector-hint">select fruit</div> <div class="selector-expand">+</div> <div class="selector-collapse">-</div> <div class="selector-option-container"> </div> </div> </div> </div> </body> </html>
總結(jié)
以上所述是小編給大家介紹的jquery+css實現(xiàn)下拉列表功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
在jquery中的ajax方法怎樣通過JSONP進行遠程調(diào)用
這一節(jié)主要演示下在JQUERY中的ajax方法怎樣通過JSONP進行遠程調(diào)用,需要的朋友可以參考下2014-04-04基于jquery實現(xiàn)的一個選擇中國大學的彈框 (數(shù)據(jù)、步驟、代碼)
基于jquery實現(xiàn)的一個選擇中國大學的彈框,需要的朋友可以參考下2012-07-07使用jquery的cookie實現(xiàn)登錄頁記住用戶名和密碼的方法
今天小編就為大家分享一篇關(guān)于使用jquery的cookie實現(xiàn)登錄頁記住用戶名和密碼的方法,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-03-03jQuery調(diào)用WebService的實現(xiàn)代碼
jQuery調(diào)用WebService的實現(xiàn)代碼,需要的朋友可以參考下。2011-06-06jQGrid動態(tài)填充select下拉框的選項值(動態(tài)填充)
這篇文章主要介紹了jQGrid動態(tài)填充select下拉框的選項值(動態(tài)填充)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11