4

私はJavaScriptの忍者ではありませんが、このライブラリをタブレット向けのサイトに組み込みたいと考えています。ここにライブラリがあります: jPanelMenu

これが私の再編集された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 の箇条書きリストだけです。Chrome 開発ツールで 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>
4

2 に答える 2

4

メニューを有効にするには、「トリガー」要素を追加する必要があります (.menu-triggerデフォルトで検索されます)。

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

(また、どうやら最初はメニュー要素が非表示であることを想定しているため、 を使用して<ul style="display: none;" ...>ください。)

デモ

于 2012-11-15T01:48:15.153 に答える
0

トリガーをアンカータグに変更する必要があります

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

Jpanelmenu Web ページのソースで確認できます。

于 2015-03-09T02:41:34.403 に答える