<!DOCTYPE html><html><head><meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>WebCat</title></head><body><ul class="menu"><li><h3>HTML</h3><p>超文本标记语言</p></li></ul><style>*{margin: 0;padding: 0;list-style: none;}.menu{width: 300px;height: 400px;border: 1px solid #ccc;margin: 50px auto;box-shadow: 2px 2px 5px #333;}.menu h3{height: 50px;line-height: 50px;text-align: center;border-bottom: 1px solid #ccc;cursor: pointer;}.menu p{/* height: 0; */text-indent: 2em;line-height: 1.5em;background-color: #ccc;padding: 10px;display: none;overflow: hidden;}.menu li:first-of-type p{display: block;}</style><script>var titles = document.getElementsByTagName('h3');var texts = document.getElementsByTagName('p');// 因为for先于回调函数(异步)执行完,如果在回调函数中获取i的值,将得到的是for循环完了之后的值/* for(var i=0;i<titles.length;i++){titles[i].onclick = function(){for(var j=0;j<texts.length;j++){if(j == i){texts[j].style.display = 'none';}else{texts[j].style.display = 'none';}}}} */for(var i=0;i<titles.length;i++){(function(i){var buy=false;titles[i].onclick=function(){for(var j=0;j<texts.length;j++){if(buy==false){if(i==j){texts[j].style.display='none'buy=true}else{texts[j].style.display='none'}}else{texts[j].style.display='none'//block}}}})(i)}/*(function(){...})()为自执行函数(函数自身调用自身),也可以叫立即执行函数(IIFE)*/</script></body></html><!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>WebCat</title> </head> <body> <ul class="menu"> <li> <h3>HTML</h3> <p>超文本标记语言</p> </li> </ul> <style> *{ margin: 0; padding: 0; list-style: none; } .menu{ width: 300px; height: 400px; border: 1px solid #ccc; margin: 50px auto; box-shadow: 2px 2px 5px #333; } .menu h3{ height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid #ccc; cursor: pointer; } .menu p{ /* height: 0; */ text-indent: 2em; line-height: 1.5em; background-color: #ccc; padding: 10px; display: none; overflow: hidden; } .menu li:first-of-type p{ display: block; } </style> <script> var titles = document.getElementsByTagName('h3'); var texts = document.getElementsByTagName('p'); // 因为for先于回调函数(异步)执行完,如果在回调函数中获取i的值,将得到的是for循环完了之后的值 /* for(var i=0;i<titles.length;i++){ titles[i].onclick = function(){ for(var j=0;j<texts.length;j++){ if(j == i){ texts[j].style.display = 'none'; }else{ texts[j].style.display = 'none'; } } } } */ for(var i=0;i<titles.length;i++){ (function(i){ var buy=false; titles[i].onclick=function(){ for(var j=0;j<texts.length;j++){ if(buy==false){ if(i==j){ texts[j].style.display='none' buy=true }else{ texts[j].style.display='none' } }else{ texts[j].style.display='none'//block } } } })(i) } /* (function(){ ... })()为自执行函数(函数自身调用自身),也可以叫立即执行函数(IIFE) */ </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>WebCat</title> </head> <body> <ul class="menu"> <li> <h3>HTML</h3> <p>超文本标记语言</p> </li> </ul> <style> *{ margin: 0; padding: 0; list-style: none; } .menu{ width: 300px; height: 400px; border: 1px solid #ccc; margin: 50px auto; box-shadow: 2px 2px 5px #333; } .menu h3{ height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid #ccc; cursor: pointer; } .menu p{ /* height: 0; */ text-indent: 2em; line-height: 1.5em; background-color: #ccc; padding: 10px; display: none; overflow: hidden; } .menu li:first-of-type p{ display: block; } </style> <script> var titles = document.getElementsByTagName('h3'); var texts = document.getElementsByTagName('p'); // 因为for先于回调函数(异步)执行完,如果在回调函数中获取i的值,将得到的是for循环完了之后的值 /* for(var i=0;i<titles.length;i++){ titles[i].onclick = function(){ for(var j=0;j<texts.length;j++){ if(j == i){ texts[j].style.display = 'none'; }else{ texts[j].style.display = 'none'; } } } } */ for(var i=0;i<titles.length;i++){ (function(i){ var buy=false; titles[i].onclick=function(){ for(var j=0;j<texts.length;j++){ if(buy==false){ if(i==j){ texts[j].style.display='none' buy=true }else{ texts[j].style.display='none' } }else{ texts[j].style.display='none'//block } } } })(i) } /* (function(){ ... })()为自执行函数(函数自身调用自身),也可以叫立即执行函数(IIFE) */ </script> </body> </html>
有没有大佬帮我修改一下代码,求求了,主要问题在下面
1.把隐藏栏改成向上弹出
2.改成可以无限弹出和收回隐藏栏
感谢大佬的帮助谢谢谢谢