0

我使用 Jquery/Jquery Mobile 在标题中创建了带有选择选项的页面。它在浏览器中运行良好，但在“Ripple Emulator”中无法运行。任何人都可以帮助解决这个问题。

我的代码：

网页：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>XML File</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type='text/javascript'></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type='text/javascript'></script>
    <link href="style.css" rel="stylesheet"/>
    <link href="menu.css" rel="stylesheet"/>
    <script src="menu.js" type="text/javascript"></script>
    <script src="scriptnw.js" type="text/javascript"></script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" id="home">
    <div id="header" data-role="header" data-theme="a">
        <ul id="menu-right" data-role="menu" class=".hideOpenMenus">
            <li>
                <!-- <span data-role="text"></span> -->
                <span data-role="button" data-icon="arrow-d" data-iconpos="notext" data-inline="true"></span>
                <ul data-role="listview" data-inset="true">
                       <li data-icon="arrow-r"><a href="listen.html" rel="external">Audio</a></li>
                       <li data-icon="info"><a href="intro.html">About</a></li>
                       <li data-icon="info"><a href="intro.html">Info</a></li>
                </ul>
            </li>
        </ul>  
            <h1>Header</h1>
    </div>
    <div data-role="content">
        <ul id="section_list" data-role="listview" data-filter="true"></ul>
    </div>
    <div data-role="footer" data-theme="a" data-position="fixed">
            <h1>Footer</h1>
    </div>
</div>

<!-- Chapter Page -->
<div data-role="page" id="chapter">
    <div data-role="header" data-position="fixed" data-theme="a">   <a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>

            <h1 id="header1"></h1> 
    </div>
    <div data-role="content">
        <ul id="content_list" data-role="listview" data-filter="true"></ul>
    </div>
    <div data-role="footer" data-theme="a"></div>
</div>
</body>
</html>

代码：js文件

$('body').bind('.hideOpenMenus', function(){
    $("ul:jqmData(role='menu')").find('li > ul').hide();
}); 
var menuHandler = function(e) {
    $('body').trigger('.hideOpenMenus');
    $(this).find('li > ul').show();
    e.stopPropagation();
};
$("ul:jqmData(role='menu') li > ul li").click(function(e) {
   $('body').trigger('.hideOpenMenus');
e.stopPropagation();

});
$('body').delegate("ul:jqmData(role='menu')",'click',menuHandler);
$('body').click(function(e){
   $('body').trigger('.hideOpenMenus');
});

在这里演示：http: //jsfiddle.net/tKjwV/1/

提前致谢。

4

0 回答 0