带有使用jquery的选项列表的菜单？答案

【问题标题】：Menu with list of option using jquery?带有使用jquery的选项列表的菜单？
【发布时间】：2013-07-27 17:27:32
【问题描述】：

我正在尝试在 jquery mobile 中获取具有不同样式的菜单，并在页面页脚中使用选项列表。如下所示。

提前致谢。

更新：

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

【问题讨论】：

jsfiddle.net/Kfnsy 代码在这里
页脚在哪里？你试过什么。不要只使用 Fiddle，在此处发布您的代码，以便人们从中学习。
我发布的小提琴带有页眉而不是页脚。当我在页脚中获取此菜单时，它会显示菜单下的项目。

标签： jquery html jquery-mobile menu

【解决方案1】：

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

工作示例：http://jsfiddle.net/Gajotres/PMrDn/58/

HTML：

<!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>

【讨论】：

你的小提琴正在工作，但是当我在浏览器中打开时......它看起来只是普通的 html 页面
那是因为您必须取消注释jquery初始化，jsFiddle示例不需要它但您仍然需要它才能成功运行此示例。
是的，它可以工作，但我们可以让这个菜单看起来像上图
感谢您制作小提琴，但与图片相比这是正常的
你在说什么，正常什么？