新人求问，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;
}
展开
收起
1
条回答
写回答
写回答
-
$(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>2019-07-17 19:17:00赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
