原生js實現(xiàn)手風琴效果
在實際網(wǎng)頁開發(fā)中,手風琴出現(xiàn)頻率也居高。
簡單地做了一個手風琴,但覺得它的過渡效果沒實現(xiàn),內(nèi)容列表出現(xiàn)得很突兀,效果圖如下:
實現(xiàn)代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>手風琴</title> <style> body, ul { padding: 0; margin: 0; } li { list-style: none; } .nav { width: 150px; height: 310px; margin-top: 30px; margin-left: 50px; font-size: 20px; border: 1px solid #ccc; } .nav>ul>li:nth-child(2n+1) { background-color: cadetblue; } .nav>ul>li:nth-child(2n+2) { height: 160px; display: none; transition: all 1s; } .nav>ul>#selected { background-color: rgb(46, 115, 117); } .nav>ul>li:nth-child(2) { display: block; } </style> </head> <body> <div class="nav"> <ul> <li id="selected">標題1</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>標題2</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>標題3</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>標題4</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>標題5</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>標題6</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> </ul> </div> <script> var title = document.querySelectorAll(".nav>ul>li:nth-child(2n+1)"); for (var i = 0; i < title.length; i++) { title[i].onmouseover = function () { for (var j = 0; j < title.length; j++) { title[j].nextElementSibling.style.display = "none"; title[j].id = ""; } this.id = "selected"; this.nextElementSibling.style.display = "block"; } } </script> </body> </html>
過渡效果加了代碼:transition: all 1s;
但并未起作用,有點疑問?!
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
這篇文章主要介紹了在iframe中使bootstrap的模態(tài)框在父頁面彈出問題,解決方法非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-08-08基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-05-05js如何查找json數(shù)據(jù)中的最大值和最小值方法
這篇文章主要介紹了js如何查找json數(shù)據(jù)中的最大值和最小值方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04跟我學習javascript的prototype,getPrototypeOf和__proto__
跟我學習javascript的prototype,getPrototypeOf和__proto__,深入學習了三個用來訪問prototype的方法,感興趣的小伙伴們可以參考一下2015-11-11IE6/7/8/9中Table/Select的innerHTML不能賦值的解決方法
IE6/7/8/9中Table/Select的innerHTML不能賦值的解決方法,需要的朋友可以參考下。2011-04-04