Question

我试图使用jQuery移动面板来做侧面菜单。我正在阅读文档here。

现在我试着做我的第一个例子。但是当我点击我的链接打开面板时，什么也没发生。

你觉得这里有什么不对吗？

<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<title>First Example</title>
</head>

<body>
<div data-role="page">

    <div data-role="header" data-position="fixed">
        <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Open</a> <h1>Home</h1>
    </div>
    <div data-role="panel" id="menu-panel">
        <ul data-role="listview">
            <li><a href="index.html">Home</a></li>
            <li><a href="About.html">About</a></li>
        </ul>
    </div><!-- /panel -->       
</div><!-- /page -->
</body>

我在尝试jsfiddle。

Answer 1

我的两分钱......你正在以错误的顺序/地点插入jQuery Mobile资源。另外jQuery在哪里？

这里有一个使用jQuery Mobile的JSFiddle已经设置了...... JSFiddle demo。如果单击左侧按钮，面板将打开或关闭。

在HTML部分中，像以前一样。

<div data-role="page">    
    <div data-role="header" data-position="fixed">
        <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> <h1>Home</h1>
    </div>
    <div data-role="panel" id="menu-panel">
        <ul data-role="listview">
            <li><a href="index.html">Home</a></li>
            <li><a href="About.html">About</a></li>
        </ul>
    </div><!-- /panel -->       
</div><!-- /page -->

现在，您应该看到内容正确丰富（仅在这种情况下为导航栏），您可以使用

管理面板

$( '#menu-panel' ).panel( "open" );

或

$( '#menu-panel' ).panel( "close" );

jQuery移动面板无法正常工作

1 个答案: