【提问】求大佬帮我修改一下代码谢谢😘-前端板块造梦空间论坛-技术交流-造梦空间论坛

已解决求大佬帮我修改一下代码谢谢😘

<!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.改成可以无限弹出和收回隐藏栏

 

感谢大佬的帮助谢谢谢谢

请登录后发表评论

© 造梦空间论坛
❤富强❤