javascript 我如何使用 jPanelMenu？(jquery 菜单插件)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13390339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i use jPanelMenu? (jquery menu plugin)
提问by cobolstinks
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library : jPanelMenu
我不是 javascript ninja，但我想将此库合并到针对平板电脑的站点中。这是库： jPanelMenu
Here is my redered html:
这是我重新编辑的 html：
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li><a href="/">Overview</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#inner-workings">Inner-Workings</a></li>
<li><a href="#animation">Animation</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#api">API</a></li>
<li><a href="#tips">Tips & Examples</a></li>
<li><a href="#about">About</a></li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
我在浏览器中看到的只是一个普通的 UL 项目符号列表。chromes 开发工具中没有 Js 错误。任何人都使用过这个插件或知道我做错了什么？
Thanks!
谢谢！
EDIT:
编辑：
Here is updated code with solution from dbaseman
这是使用 dbaseman 的解决方案更新的代码
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li><a href="/">Overview</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#inner-workings">Inner-Workings</a></li>
<li><a href="#animation">Animation</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#api">API</a></li>
<li><a href="#tips">Tips & Examples</a></li>
<li><a href="#about">About</a></li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
采纳答案by McGarnagle
You need to add a "trigger" element to enable the menu (it looks for .menu-triggerby default):
您需要添加一个“触发器”元素以启用菜单（.menu-trigger默认情况下会查找）：
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
（另外，显然它希望菜单元素最初被隐藏，所以使用<ul style="display: none;" ...>.）
回答by Ahmed Albaroody
You need to change trigger to anchor tag
您需要将触发器更改为锚标记
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.
您可以在 Jpanelmenu 网页源中看到它。
