原生js實(shí)現(xiàn)下拉選項(xiàng)卡
更新時(shí)間：2019年11月27日 14:57:08 作者：濮家大少
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)下拉選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)下拉選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下
效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉選項(xiàng)卡</title>
<style>
*{
padding: 0px;
margin: 0px;
font-family: "微軟雅黑";
font-size: 12px;
}
ul{
list-style: none;
}
.head{
width: 1000px;
height: 50px;
margin: 0px auto;
background-color: greenyellow;
}
.head>ul{
display: block;
}
.head>ul>li{
float: left;
width: 200px;
text-align: center;
height: 50px;
line-height: 50px;
font-size: 15px;
}
.head>ul>li:hover{
background-color: green;
}
.head>ul>li:hover>ul{
display: block;
}
.head>ul>li>ul{
display: none;
position: absolute;
}
.head>ul>li>ul>li{
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
font-size: 15px;
background-color: greenyellow;
margin-top: 5px;
}
.head>ul>li>ul>li:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="head">
<ul>
<li>
院系
<ul>
<li>計(jì)科系</li>
<li>電氣系</li>
<li>食品系</li>
<li>機(jī)械系</li>
</ul>
</li>
<li>
學(xué)科
<ul>
<li>無線傳感網(wǎng)</li>
<li>計(jì)算機(jī)組成原理</li>
<li>java程序設(shè)計(jì)</li>
<li>c語(yǔ)言</li>
</ul>
</li>
<li>
專業(yè)
<ul>
<li>物聯(lián)網(wǎng)工程</li>
<li>軟件工程</li>
<li>計(jì)算機(jī)應(yīng)用</li>
<li>計(jì)算機(jī)科學(xué)</li>
</ul>
</li>
<li>
實(shí)驗(yàn)室
<ul>
<li>物聯(lián)網(wǎng)實(shí)驗(yàn)室</li>
<li>嵌入實(shí)驗(yàn)室</li>
<li>軟件工程實(shí)驗(yàn)室</li>
<li>扮客人才孵化基地</li>
</ul>
</li>
<li>
宿舍
<ul>
<li>617宿舍</li>
<li>618宿舍</li>
<li>619宿舍</li>
<li>620宿舍</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了微信小程序開發(fā)之下拉刷新 上拉加載，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-11-11
基于three.js編寫的一個(gè)項(xiàng)目類示例代碼
這篇文章主要給大家介紹了關(guān)于基于three.js編寫的一個(gè)項(xiàng)目類的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
原生JS實(shí)現(xiàn) MUI導(dǎo)航欄透明漸變效果
透明漸變導(dǎo)航是一種解決滾動(dòng)條通頂?shù)淖兺ǚ桨?。這篇文章主要介紹了原生JS實(shí)現(xiàn) MUI導(dǎo)航欄透明漸變效果,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了js中如何對(duì)url進(jìn)行編碼和解碼問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要為大家詳細(xì)介紹了js帶鬧鈴功能的倒計(jì)時(shí)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JS獲取鼠標(biāo)坐標(biāo)位置實(shí)例分析
這篇文章主要介紹了JS獲取鼠標(biāo)坐標(biāo)位置的方法,結(jié)合實(shí)例形式分析了JavaScript常見的獲取鼠標(biāo)頁(yè)面、屏幕等坐標(biāo)位置的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-01-01
微信小程序判斷用戶是否需要再次授權(quán)獲取個(gè)人信息
這篇文章主要介紹了微信小程序判斷用戶是否需要再次授權(quán)獲取個(gè)人信息,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript實(shí)現(xiàn)函數(shù)緩存及應(yīng)用場(chǎng)景
在JavaScript中,可以通過函數(shù)緩存來提高函數(shù)的執(zhí)行效率,本文就來介紹一下JavaScript實(shí)現(xiàn)函數(shù)緩存及應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
js實(shí)現(xiàn)簡(jiǎn)單模態(tài)窗口，背景灰顯
昨天中午做項(xiàng)目需要一個(gè)模態(tài)窗口，想起上一個(gè)公司的項(xiàng)目經(jīng)理曾經(jīng)做過一個(gè)比較牛的模態(tài)窗口，至今沒用搞清楚實(shí)現(xiàn)原理，平時(shí)也沒有時(shí)間去分析，試著自己做了一個(gè)，用了一天的時(shí)間終于完成了，給大家一起分享， 也希望高手多提意見。第一次在博客園上發(fā)文章，挺高興的。2008-11-11
深入理解JavaScript系列（29）：設(shè)計(jì)模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列（29）：設(shè)計(jì)模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對(duì)象,不僅允許你向方法添加行為,而且還可以將方法設(shè)置成原始對(duì)象調(diào)用（例如裝飾者的構(gòu)造函數(shù)）,需要的朋友可以參考下2015-03-03