用jquery实现下拉菜单并解决下拉菜单不显示的问题

forintj

已于 2024-08-17 23:59:20 修改

阅读量178

点赞数 7

分类专栏： Django项目开发文章标签： html 前端 javascript

于 2024-08-17 23:24:44 首次发布

本文链接：https://blog.csdn.net/weixin_73760234/article/details/141288758

版权

Django项目开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

半年前学的前端现在大多忘记了。。。今天接单帮一位同学做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：

forintj

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用jquery实现下拉菜单并解决下拉菜单不显示的问题

半年前学的前端现在大多忘记了。。。今天接单帮一位同学做web前端作业又重新学了下，今天写的导航栏，有一点要求实现下拉菜单，我选择利用jq实现，但是html，css，js全写好后下拉菜单不显示，调了半个小时才发现，原来……👇👇👇。
复制链接

扫一扫