js+csss實(shí)現(xiàn)的一個(gè)帶復(fù)選框的下拉框
更新時(shí)間:2014年09月29日 16:42:38 投稿:whsnow
用js+csss實(shí)現(xiàn)的一個(gè)帶復(fù)選框的下拉框,用到了很基礎(chǔ)的技術(shù),但是比較實(shí)用,喜歡的朋友可以參考下
效果圖:
css:
<style type="text/css"> /* 帶復(fù)選框的下拉框 */ ul li{ list-style: none; padding:0px; margin: 0px; } .select_checkBox{ border:0px solid red; position: relative; display:inline-block; } .chartQuota{ height:23px; float:left; display:inline-block; border:0px solid black; position: relative; } .chartOptionsFlowTrend{ z-index:300; background-color:white; border:1px solid gray; display:none; position: absolute; left:0px; top:23px; width:150px; } .chartOptionsFlowTrend ul{ float:left; padding: 0px; margin: 5px; } .chartOptionsFlowTrend li{ /* float:left; */ display:block; position: relative; left:0px; margin: 0px; clear:both; } .chartOptionsFlowTrend li *{ float:left; } a:-webkit-any-link { color: -webkit-link; text-decoration: underline; cursor: auto; } .chartQuota p a { float: left; height: 21px; outline: 0 none; border: 1px solid #ccc; line-height: 22px; padding: 0 5px; overflow: hidden; background: #eaeaea; color: #313131; text-decoration: none; } .chartQuota p { margin:0px; folat:left; overflow: hidden; height: 23px; line-height:24px; display: inline-block; } .chartOptionsFlowTrend p { height: 23px; line-height: 23px; overflow: hidden; position: relative; z-index: 2; background: #fefbf7; padding-top: 0px; display: inline-block; } .chartOptionsFlowTrend p a { border: 1px solid #fff; margin-left: 15px; color: #2e91da; } </style>
html:
<div class="select_checkBox"> <div class="chartQuota"> <p> <a href="javascript:;" hidefocus="true" title="請(qǐng)選擇指標(biāo)"><span>選擇指標(biāo)</span> <b></b> </a> </p> </div><br> <div class="chartOptionsFlowTrend""> <ul> <li class=""><input type="checkbox" value="1"><span>瀏覽次數(shù)(PV)</span> </li> <li class=""><input type="checkbox" value="1"><span>獨(dú)立訪客(UV)</span> </li> <li class=""><input type="checkbox" value="1"><span>IP</span> </li> <li class=""><input type="checkbox" value="1"><span>新獨(dú)立訪客</span> </li> <li class=""><input type="checkbox" value="1"><span>訪問次數(shù)</span> </li> </ul> <p> <a href="javascript:;" title="確定" hidefocus="true" class="a_0">確定</a><a href="javascript:;" title="取消" hidefocus="true" class="a_1">取消</a> </p> </div> </div>
js:
<script type="text/javascript"> $(function(){ $(".select_checkBox").hover(function(){ $(".chartOptionsFlowTrend").css("display","inline-block"); },function(){ $(".chartOptionsFlowTrend").css("display","none"); }); }); </script>
您可能感興趣的文章:
- AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
- JS仿百度自動(dòng)下拉框模糊匹配提示
- js自定義select下拉框美化特效
- js實(shí)現(xiàn)的下拉框二級(jí)聯(lián)動(dòng)效果
- 原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
- js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框
- javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- jsp從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- js實(shí)現(xiàn)Select下拉框具有輸入功能的方法
- JS獲取文本框,下拉框,單選框的值的簡(jiǎn)單實(shí)例
- Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼
- 利用js獲取下拉框中所選的值
相關(guān)文章
基于JavaScript實(shí)現(xiàn)留言板功能
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)留言板功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03不用typsescript如何使用類型增強(qiáng)功能
這篇文章主要給大家介紹了關(guān)于不用typsescript如何使用類型增強(qiáng)功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03js 判斷checkbox是否選中的實(shí)現(xiàn)代碼
大家在很多場(chǎng)合也許會(huì)遇到判斷頁(yè)面是否有元素選中,下面介紹的是利用js判斷是否選中CheckBox的方法。2010-11-11JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果
這篇文章主要為大家詳細(xì)介紹了JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果,只要將鼠標(biāo)放上該商品的區(qū)域,原本折疊起來的商品便會(huì)自動(dòng)展開,感興趣的小伙伴們可以參考一下2016-03-03JS組件封裝之監(jiān)聽localStorage的變化
這篇文章主要介紹了JS組件封裝之監(jiān)聽localStorage的變化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09