AsiaDIT 2021-06-12 23:19 采纳率: 42.9%
浏览 47
已采纳

js只对第一个一级类目生效 是什么原因？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="project1.css" />
    <script src="project1.js"></script>
<style type="text/css">
    *{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;}

a{text-decoration:none }

.nav{width:260px;position: relative;box-sizing: border-box;background: #fff;display: block;margin-left: 20px;}
.nav ul li {margin-left: 20px;color: #fff;background: #31302a;line-height: 65px;border-bottom: 1px solid #ccc;}

.nav ul li: hover {color: #000;background: #fff;}

.nav-one{position: relative;color: #fff;background: #31302a;height:60px;line-height: 60px;padding-left:20px;}


.nav-two{position: relative;color: #000;background: #fff;height:45px;line-height: 45px;padding-left:30px;}
.nav-two:hover {color: lightblue;background: #272822;}

.nav-three{position: relative;color: #000;height:40px;line-height: 40px;cursor: pointer;}

.nav-two-father{display: none;}
.nav-three-father{display: none;}

.nav ul li ul li {position: relative;color: #000;background: #fff;line-height: 45px;padding-left:30px;}
    
</style>

</head>
<body>
   <div class="nav">
       <ul>
           <li>
               <a  href="#"  class="nav-one"
               onclick="clicks()">一级类目</a>
               <ul  class="nav-two-father"   id="open">
                   <li>
                       <a href="#" class="nav-two"
                       onclick="boxp()"
                       >二级类目</a>
                       <ul  class="nav-three-father"
                       id="box">
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                       </ul>
                   </li>
               </ul>
           </li>

           <li>
               <a  href="#"  class="nav-one"
               onclick="clicks()">一级类目</a>
               <ul  class="nav-two-father"   id="open">
                   <li>
                       <a href="#" class="nav-two"
                       onclick="boxp()"
                       >二级类目</a>
                       <ul  class="nav-three-father"
                       id="box">
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                       </ul>
                   </li>
               </ul>
           </li>
       </ul>
   </div>
<script type="text/javascript">
   var i = 1;
    var x = 1;

        function clicks()
            {
                i++;
                if( i%2 ==0){
                    document.getElementById("open").style.display = "block" ;
                }
                else{
                    document.getElementById("open").style.display = "none" ;
                }
            }

        function boxp()
            {
                x++;
                if( x%2 ==0){
                    document.getElementById("box").style.display = "block" ;
                }
                else{
                    document.getElementById("box").style.display = "none" ;
                }
            }
    
</script>

</body>
</html>

</script>

 

 

  • 写回答

3条回答 默认 最新

  • 风雪一更 2021-06-15 16:39
    关注
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="project1.css" />
    <script src="project1.js"></script>
<style type="text/css">
    *{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;}
 
a{text-decoration:none }
 
.nav{width:260px;position: relative;box-sizing: border-box;background: #fff;display: block;margin-left: 20px;}
.nav ul li {margin-left: 20px;color: #fff;background: #31302a;line-height: 65px;border-bottom: 1px solid #ccc;}
 
.nav ul li: hover {color: #000;background: #fff;}
 
.nav-one{position: relative;color: #fff;background: #31302a;height:60px;line-height: 60px;padding-left:20px;}
 
 
.nav-two{position: relative;color: #000;background: #fff;height:45px;line-height: 45px;padding-left:30px;}
.nav-two:hover {color: lightblue;background: #272822;}
 
.nav-three{position: relative;color: #000;height:40px;line-height: 40px;cursor: pointer;}
 
.nav-two-father{display: none;}
.nav-three-father{display: none;}
 
.nav ul li ul li {position: relative;color: #000;background: #fff;line-height: 45px;padding-left:30px;}
    
</style>
 
</head>
<body>
   <div class="nav">
       <ul>
           <li>
               <a  href="#"  class="nav-one"
               onclick="clicks(0)">一级类目</a>
               <ul  class="nav-two-father open">
                   <li>
                       <a href="#" class="nav-two"
                       onclick="boxp(0)"
                       >二级类目</a>
                       <ul  class="nav-three-father box">
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                       </ul>
                   </li>
               </ul>
           </li>
 
           <li>
               <a  href="#"  class="nav-one"
               onclick="clicks(1)">一级类目</a>
               <ul  class="nav-two-father open">
                   <li>
                       <a href="#" class="nav-two"
                       onclick="boxp(1)"
                       >二级类目</a>
                       <ul  class="nav-three-father box">
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                           <li  class="nav-three">三级类目</li>
                       </ul>
                   </li>
               </ul>
           </li>
       </ul>
   </div>
<script type="text/javascript">
   var i0 = 1,x0 = 1,i1 = 1,x1 = 1;
 
        function clicks(a)
            {
                a==0?i0++:i1++;
                if( (a==0?i0:i1)%2 ==0 ){
                    document.getElementsByClassName("open")[a].style.display = "block" ;
                }
                else{
                    document.getElementsByClassName("open")[a].style.display = "none" ;
                }
            }
 
        function boxp(a)
            {
                a==0?x0++:x1++;
                if( (a==0?x0:x1)%2 ==0){
                    document.getElementsByClassName("box")[a].style.display = "block" ;
                }
                else{
                    document.getElementsByClassName("box")[a].style.display = "none" ;
                }
            }
    
</script>
 
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 为什么eclipse不能再下载了？
  • ¥15 编辑cmake lists 明明写了project项目名，但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题：求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问，已排除网页问题
  • ¥50 如何将脑的图像投影到颅骨上
  • ¥15 提问一个关于vscode相关的环境配置问题，就是输入中文但是显示不出来，代码在idea可以显示中文，但在vscode不行，不知道怎么配置环境
  • ¥15 netcore使用PuppeteerSharp截图
  • ¥20 这张图页头，页脚具体代码该怎么写？
  • ¥20 WPF MVVM模式 handycontrol 框架， hc:SearchBar 控件 Text="{Binding NavMenusKeyWords}" 绑定取不到值
  • ¥15 需要手写数字信号处理Dsp三个简单题 不用太复杂