菜单和使用jquery的选项列表？_Jquery_Html_Jquery Mobile_Menu

菜单和使用jquery的选项列表？

jquery html jquery-mobile menu

菜单和使用jquery的选项列表？,jquery,html,jquery-mobile,menu,Jquery,Html,Jquery Mobile,Menu,我试图在jQueryMobile中获得不同风格的菜单，页面页脚中有一个选项列表，如下所示提前谢谢更新： $('body').bind('hideOpenMenus', function(){ $("ul:jqmData(role='menu')").find('li > ul').hide(); }); var menuHandler = function(e) { $('body').trigger('hideOpenMenus'); $(this

我试图在jQueryMobile中获得不同风格的菜单，页面页脚中有一个选项列表，如下所示

提前谢谢

更新：

    $('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');
});

这是最简单的解决方案，没有javascript或CSS，基本上是纯jQuery移动解决方案

工作示例：

HTML:


jQM复杂演示
索引页





索引页

代码在这里，页脚在哪里？你试过什么。不要只使用Fiddle，在这里发布你的代码，这样人们可以从中学习。我发布的Fiddle是页眉而不是页脚。当我在页脚中获取此菜单时，它会显示菜单下的项目。您的小提琴正在工作，但当我在浏览器中打开时..它看起来像普通的html页面，这是因为您必须取消对jquery初始化的注释，JSFIDLE示例不需要它，但您仍然需要它才能成功运行此示例。是的，它可以工作，但我们可以使此菜单与上图中的一样吗谢谢您制作FIDLE，但与图像相比，这是正常的。您在说什么，正常什么？

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h1>Index page</h1>
            </div>
            
            <div data-role="content">
                <div data-role="popup" id="popupMenu">
                    <ul data-role="listview" data-inset="true" data-theme="a">
                        <li data-icon="arrow-r"><a href="">Item1</a></li>
                        <li data-icon="grid"><a href="">Item2</a></li>
                        <li data-icon="info"><a href="">Item3</a></li>
                    </ul>
                </div>
            </div>
            
            <div data-theme="a" data-role="footer" data-position="fixed">
                <h1>Index page</h1>                
                <a href="#popupMenu" class="ui-btn-left" data-icon="bars" data-iconpos="notext" data-rel="popup" data-transition="pop">Next</a>                
            </div>            
        </div>    
    </body>
</html>