极客教程如何使用jQuery UI实现分类菜单
在这篇文章中，我们将学习如何以这样的方式配置项目，将哪些元素转换为可选择的菜单项。我们可以使用这种技术来创建类别标题。而其余的项目则可以作为可选择的项目使用。
语法:
$( "#selector" ).menu({ items: "> :not(.selector)" });
参数：该方法接受一个参数作为项目。
返回值：该方法不返回任何东西。
需要添加的脚本：。
请先下载库，然后使用下面给出的脚本路径。
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.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>
例子：在这个例子中，我们创建了两个列表，一个是编程语言类别，另一个是图书馆。在这里，我们对不同类别的两个标题都应用了这个方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"~/jquery-ui-1.12.1.custom//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({
items: "> :not(.widget-header)"
});
});
</script>
<style>
#menu {
width: 300px;
}
.widget-header {
padding: 0.3em;
color: white;
}
</style>
</head>
<body>
<h3>Geeks for Geeks Menu Using jQuery UI</h3>
<ul id="menu">
<li class="widget-header">
<div style="background-color: green;">
Programming Languages
</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>Javascript</div>
</li>
<li>
<div>Java</div>
</li>
<li class="widget-header">
<div style="background-color: green;">
Libraries
</div>
</li>
<li>
<div>Tensorflow</div>
</li>
<li>
<div>Pandas</div>
</li>
<li>
<div>Numpy</div>
</li>
</ul>
</body>
</html>
输出 :
