Question

我想知道这段代码有什么问题，因为这是我在网上学到的一个教程，他给出了我复制和粘贴的源代码，但似乎不能在我的最后工作

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery Mobile 1.3 | Swipe to Reveal Panel Demo</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme='c'>

    <div data-role="header">
        <h1>Swipe for Panel Demo</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">  
            <h2>If you swipe left-right</h2>    
            <h2>If you swipe right-left</h2>        
        </div>
        <p><em>This page uses jQuery Mobile 1.3.0-beta 1</em></p>
    </div><!-- /content -->

    <div data-role="panel" id="leftpanel" data-display="reveal" data-position="left">
        <ul data-role='listview'>
            <li data-theme='a'>Listview</li>
            <li>Item A<span class='ui-li-count'>24</span></li>
        </ul>

    </div><!-- /leftpanel -->
    <div data-role="panel" id="rightpanel" data-display="push" data-position="right"data-theme="b">
        <h2>What are you looking for?</h2>
    </div><!-- /rightpanel -->
</div><!-- /page -->
<script type='text/javascript'>
$(document).on('pageinit',function(){
    $("#content").on("swiperight",function(){
        $("#leftpanel").panel( "open");
    });
    $("#content").on("swipeleft",function(){
        $("#rightpanel").panel( "open");
    });
});
</script>
</body>
</html>

当我在我的页面上滑动页面时没有任何反应，但是当我在在线演示中执行此操作时，该教程可以完美地工作。我需要帮助。

用jQuery推送菜单

0 个答案: