我如何使用jPanelMenu？（jquery菜單插件）

Question

我不是javascript忍者，但我想將這個庫納入針對平板電腦的網站。 這是圖書館： jPanelMenu

這是我的retml 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 &amp; 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>

我在瀏覽器中看到的只是一個普通的UL項目符號列表。 在chromes dev工具中沒有Js錯誤。 有人曾經使用這個插件或知道我做錯了什么？

謝謝！

編輯：

這是使用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 &amp; 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>

Answer 1

您需要添加一個“trigger”元素來啟用菜單（默認情況下它會查找.menu-trigger ）：

<div class="menu-trigger">Click me to trigger</div>

（另外，顯然它希望最初隱藏菜單元素，所以使用<ul style="display: none;" ...> 。）

演示

Answer 2

您需要將觸發器更改為錨標記

<a class="menu-trigger" href="#menu">Click Me</div>

您可以在Jpanelmenu網頁源中看到它。

我如何使用jPanelMenu？（jquery菜單插件）

問題描述

2 個解決方案

解決方案1
4 已采納 2012-11-15 01:48:15

解決方案2
0 2015-03-09 02:41:34

我如何使用jPanelMenu？ （jquery菜單插件）

問題描述

2 個解決方案

解決方案1 4 已采納 2012-11-15 01:48:15

解決方案2 0 2015-03-09 02:41:34

我如何使用jPanelMenu？（jquery菜單插件）

解決方案1
4 已采納 2012-11-15 01:48:15

解決方案2
0 2015-03-09 02:41:34