【已解决】新人求问,jquery没有触发的问题

仿写了一个导航栏的折叠效果,但是实际没有触发,是什么问题呢?如果是触发了,那WORK是同时转跳到WORK.HTML并且显示子菜单,还是只显示子菜单,并不会转跳。

<script>
 $(document).ready(function () {
            //将二级菜单设置为不可见
            $("#work").css("display", "none");
            //单击一级菜单触发的事件
            $(".work-menu").click(function () {
                $("#work").css("display", "none");//将二级菜单全部设置为不可见
                $(this).next("#work").css("display", "block");//当前一级菜单的二级菜单设置为可见
            })
        })
  
</script>

下面是BODY部分

  <div id="nav">
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="about us.html">ABOUT US</a></li>
      <div class="work-menu">
        <li><a href="works.html">WORKS</a></li></div>
         <div id="work" >
         <ul>
         <li><a href="###.html">子菜单1</a></li>
         <li><a href="###.html">子菜单2</a></li>
         <li><a href="###.html">子菜单3</a></li>
         <li><a href="####.html">子菜单4</a></li>
         <li><a href="####.html">子菜单5</a></li>
         </ul>
         </div>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="jobs.html">JOBS</a></li>
    </ul>
  </div>

CSS:

#nav{
    width:250px;
    height:200px;
    background:#FFF;
    display:block;
    float:left;    
}

.work-menu{
    background:#0C6
    
}

 #nav #work{
    list-style:none;
    margin-right:-10px;
    margin-top:-2px;
    display:none;    
}

#nav #work ul li{
    font-size:10px;
}

#nav ul{
    list-style:none;
    margin-right:10px;
    margin-top:-2px;
}
#nav ul li{
    line-height:20px;
    text-align:right;
    font-size:13px;
    font-weight:bold;
}

#nav ul li a{
    list-style:none;
    text-decoration:none;
    
}
阅读 2.6k
评论
    1 个回答
    • 69
    $(document).ready(function () {
                    //将二级菜单设置为不可见
                    $("#work").css("display", "none");
                    //单击一级菜单触发的事件
                    $(".work-menu").click(function (e) {
                        e.preventDefault();
                        $("#work").css("display", "none");//将二级菜单全部设置为不可见
                        $(this).next("#work").css("display", "block");//当前一级菜单的二级菜单设置为可见
                    })
                })

    其实你的Js没出BUG,没有显示,是因为<li><a href="works.html">WORKS</a></li>,你在给div.work-menu绑定点击事件的时候,没有阻碍a标签的默认跳转动作,因此他就直接跳转到works.html,下面的代码就不再执行了,你在里面加一个e.preventDefault();就好了

    另外你的html,非常不建议把div写成ul的子元素,建议放进li中


    <!DOCTYPE html>
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                #nav{
                    width:250px;
                    height:200px;
                    background:#FFF;
                    display:block;
                    float:left;    
                }
    
                .work-menu{
                    background:#0C6
    
                }
    
                #nav #work{
                    list-style:none;
                    margin-right:-10px;
                    margin-top:-2px;
                    display:none;    
                }
    
                #nav #work ul li{
                    font-size:10px;
                }
    
                #nav ul{
                    list-style:none;
                    margin-right:10px;
                    margin-top:-2px;
                }
                #nav ul li{
                    line-height:20px;
                    text-align:right;
                    font-size:13px;
                    font-weight:bold;
                }
    
                #nav ul li a{
                    list-style:none;
                    text-decoration:none;
    
                }
            </style>
        </head>
        <body>
            <div id="nav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about us.html">ABOUT US</a></li>
                    <div class="work-menu">
                        <li><a href="works.html">WORKS</a></li>
                    </div>
                    <div id="work" >
                        <ul>
                            <li><a href="###.html">子菜单1</a></li>
                            <li><a href="###.html">子菜单2</a></li>
                            <li><a href="###.html">子菜单3</a></li>
                            <li><a href="####.html">子菜单4</a></li>
                            <li><a href="####.html">子菜单5</a></li>
                        </ul>
                    </div>
                    <li><a href="contact.html">CONTACT</a></li>
                    <li><a href="jobs.html">JOBS</a></li>
                </ul>
            </div>
            <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
            <script>
                $(document).ready(function () {
                    //将二级菜单设置为不可见
                    $("#work").css("display", "none");
                    //单击一级菜单触发的事件
                    $(".work-menu").click(function (e) {
                        e.preventDefault();
                        $("#work").css("display", "none");//将二级菜单全部设置为不可见
                        $(this).next("#work").css("display", "block");//当前一级菜单的二级菜单设置为可见
                    })
                })
            </script>
        </body>
    </html>
    

    图片描述

    这不是有了嘛

      撰写回答

      登录后参与交流、获取后续更新提醒