程序员开发实例大全宝库

网站首页 > 编程文章 正文

jquery一句代码实现无限级菜单源码

zazugpt 2024-09-10 23:36:34 编程文章 24 ℃ 0 评论

预告：

下个视频加快进度，把jquery一句代码实现的效果展示完，心灵鸡汤后进入到微信小程序话题。

主题

本文是利用UI库展示ul-li结构的菜单，实际上是让大家知道jquery ui库怎么使用。前面已经有视频，下面贴源码。

页头

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Menu - Default functionality</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

起作用的核心代码

<script>

$( function() {

$( "#menu" ).menu();

} );

</script>

<style>

.ui-menu { width: 150px; }

</style>

</head>

<body>

菜单结构，ul-li，下级菜单是li嵌套的ul，可以无限嵌套。

<ul id="menu">

<li><div>Toys (n/a)</div></li>

<li><div>Books</div></li>

<li><div>Clothing</div></li>

<li><div>Electronics</div>

<ul>

<li><div>Home Entertainment</div></li>

<li><div>Car Hifi</div></li>

<li><div>Utilities</div></li>

</ul>

</li>

<li><div>Movies</div></li>

<li><div>Music</div>

<ul>

<li><div>Rock</div>

<ul>

<li><div>Alternative</div></li>

<li><div>Classic</div></li>

</ul>

</li>

<li><div>Jazz</div>

<ul>

<li><div>Freejazz</div></li>

<li><div>Big Band</div></li>

<li><div>Modern</div></li>

</ul>

</li>

<li><div>Pop</div></li>

</ul>

</li>

<li><div>Specials (n/a)</div></li>

</ul>

页尾

</body>

</html>

视频

会的就不用进了，jquery一句代码实现无限级菜单，UI库应用示例，不接受快速开发也不用进

（科技自媒体原创作者：钱庄王员外）

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表