【JS常用效果】jquery实现ul li菜单展开收起效果

最新推荐文章于 2023-09-03 17:09:39 发布

原创最新推荐文章于 2023-09-03 17:09:39 发布 · 9.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ul #li #菜单 #收缩展开 #ViewUI

javascript代码大全专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用jQuery库来实现网页中下拉菜单效果的方法。通过简单的HTML结构配合jQuery选择器和事件处理，可以轻松创建响应式下拉菜单。这种实现方式不仅提高了用户体验，还简化了开发流程。

JSCode：

//导入jquery库

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

//程序代码
<script type="text/javascript">
$(document).ready(function()
{
$("#mymenu ul li").next("ul").hide();
$("#mymenu ul li").click(function()
{
$(this).next("ul").toggle();
});
});
</script>

HTMLCode：

<div id="mymenu">
<ul>
<li><a href="#">用户管理</a></li>
<ul>
<li><a href="#">用户查询</a></li>
<li><a href="#">添加用户</a></li>
<li><a href="#">用户组</a></li>
</ul>
</ul>
<ul>
<li><a href="#">课程管理</a></li>
<ul>
<li><a href="#">课程列表</a></li>
<li><a href="#">添加课程</a></li>
</ul>
</ul>
</div>