前言
半年前学的前端现在大多忘记了。。。今天接单帮一位同学做web前端作业又重新学了下,今天写的导航栏,有一点要求实现下拉菜单,我选择利用jq实现,但是html,css,js全写好后下拉菜单不显示,调了半个小时才发现,原来……👇👇👇
怎么利用jq实现下拉菜单
先说下我怎么用jq实现下拉菜单的
先在head标签引用jq
<script src="jquery-3.3.1.min.js"></script>
注意src后面是你自己项目的路径。
然后是……
html代码
<div class="navR">
<ul>
<li>
<a href="#">我的17</a>
</li>
<li>
<a href="#">我的订单</a>
</li>
<li>
<a href="#">我的收藏</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#">更多链接</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
css代码
.navR{
float: right;
}
.navR li {
position: relative;
}
.navR li ul {
position: absolute;
display: none;
}
js代码
$(document).ready(function () {
$(".navR li").hover(function () {
$(this).children("ul").slideToggle();
});
});
写到这里,逻辑上是没错的,但是咋调都不显示。
后来灵光一现,引用的jq必须在自己写的js前面
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" />
<script src="jquery-3.3.1.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
如果先引用index.js在引用jq就不显示,调整正确位置后就可以正常显示了
页面demo: