使用H5实现横向的手风琴功能
HTML
<!DOCTY PE ht ML > <html> <head lang="en"> < ;m eta charset="UTF-8"> <t IT le></title> </head> <body> <p> <ul> <li><h3>1</h3>< img src="images/01. jpg " alt=""/></li> <li><h3>2</h3><img src="images/02.jpg" alt=""/></li> <li><h3>3</h3><img src="images/03.jpg" alt=""/></li> <li><h3>4</h3><img src="images/04.jpg" alt=""/></li> <li><h3>5</h3><img src="images/01.jpg" alt=""/></li> <li><h3>6</h3><img class="img" src="images/02.jpg" alt=""/></li> </ul> </p> </body> </html>
CSS
* { padding: 0; m arg in: 0; } p { width: 522px; h ei ght: 222px; mar gin : 50px auto; border: 1px solid red ; box -s izing: border-box; box-sizing: border-box; } ul { overflow: hidden; height: 222px; } li { float: left; height: 222px; list-style: none; box-sizing: border-box; } h3 { width: 50px; float: left; height: 222px; border: 1px solid green; box-sizing: border-box; } img { width: 0px; float: left; } .img { width: 220px; } JavaScript
VAR lis = document.querySelectorAll("li"); var imgs = document.querySelectorAll("img"); for (var i = 0; i < lis.length; i++ ) { //给所有的li标签添加 点击事件 lis[i].onclick = function() { //将所有的图片 宽 度设置为0 for (var i = 0; i < lis.length; i++) { imgs[i].style.width = "0px"; } //将当前点击li标签中的img标签设置宽度为220px this.querySelector("img").style.width = "220px"; } } 使用H5实现横向的手风琴功能
HTML
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <ul> <li><h3>1</h3><img src="images/01.jpg" alt=""/></li> <li><h3>2</h3><img src="images/02.jpg" alt=""/></li> <li><h3>3</h3><img src="images/03.jpg" alt=""/></li> <li><h3>4</h3><img src="images/04.jpg" alt=""/></li> <li><h3>5</h3><img src="images/01.jpg" alt=""/></li> <li><h3>6</h3><img class="img" src="images/02.jpg" alt=""/></li> </ul> </p> </body> </html>
CSS
* { padding: 0; margin: 0; } p { width: 522px; height: 222px; margin: 50px auto; border: 1px solid red; box-sizing: border-box; box-sizing: border-box; } ul { overflow: hidden; height: 222px; } li { float: left; height: 222px; list-style: none; box-sizing: border-box; } h3 { width: 50px; float: left; height: 222px; border: 1px solid green; box-sizing: border-box; } img { width: 0px; float: left; } .img { width: 220px; } JavaScript
var lis = document.querySelectorAll("li"); var imgs = document.querySelectorAll("img"); for (var i = 0; i < lis.length; i++) { //给所有的li标签添加点击事件 lis[i].onclick = function() { //将所有的图片宽度设置为0 for (var i = 0; i < lis.length; i++) { imgs[i].style.width = "0px"; } //将当前点击li标签中的img标签设置宽度为220px this.querySelector("img").style.width = "220px"; } } 觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-使用Html5实现手风琴案例 全部内容，希望文章能够帮你解决 html5教程-使用Html5实现手风琴案例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-使用Html5实现手风琴案例的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219397