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

1年前发布

393

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

感谢大佬的帮助谢谢谢谢

1人已评分

// 获取所有的元素 var titles = document.getElementsByTagName('h3'); // 获取所有的元素 var texts = document.getElementsByTagName('p'); // 遍历每个元素 for (var i = 0; i < titles.length; i++) { // 为每个元素添加点击事件监听器 titles[i].addEventListener('click', function() { // 获取点击的元素的父级元素 var parent = this.parentNode; // 获取父级元素中的第一个元素作为内容元素 var content = parent.getElementsByTagName('p')[0]; // 检查内容元素的 display 样式属性是否为 'none'（即元素是否隐藏） if (content.style.display === 'none') { // 如果内容元素是隐藏的，则显示它，将 display 样式设置为 'block' content.style.display = 'block'; } else { // 如果内容元素是显示的，则隐藏它，将 display 样式设置为 'none' content.style.display = 'none'; } }); }