时间戳

首页 > 解决方案 > 显示一个框的 JQuery 菜单

jquery - 显示一个框的 JQuery 菜单

问题描述

我正在学习 JQuery 的基础知识，我的导师展示的 menu() 看起来一点也不像我的。

这是我创建的菜单的 LAF：

在此处输入图像描述

代码：

<!Doctype HTML>

<html>
	<head>
		<meta charset="utf-8"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	</head>

	<body>
		<ul id="greetings">
			<li>
				Hello
				<ul>
					<li>Hi</li>
					<li>Welcome</li>
				</ul>
			</li>

			<li>World!</li>
		</ul>

		<script>
			$(function() {
				$('#greetings').menu()
			})
		</script>
	</body>
</html>

另一个问题： JQuery Menu Not Working Correctly

该解决方案根本不适用于我的代码......即使我添加了嵌套列表，它也不起作用。当我将鼠标悬停在该框上时，光标变为指针，然后单击该框从左侧创建另一个小框。

浏览器尝试：

如何让菜单工作？

标签： jquerymenu

解决方案

我认为您可能想尝试更多按照文档建议的内容。

https://api.jqueryui.com/menu/#option-menus

<ul id="greetings">
  <li>
    <div>Hello</div>
    <ul>
      <li>
        <div>Hi</div>
      </li>
      <li>
        <div>Welcome</div>
      </li>
    </ul>
  </li>
  <li>
    <div>World</div>
  </li>
</ul>

推荐阅读