Question

我正在尝试使用JQuery mobile的面板功能，并且在遵循一些教程之后我无法让面板链接我的应用程序中的页面来工作，它只是停留在第一页动画工作得很好。有没有建议如何解决这个问题？

这是我的代码：

<body>
<!--Activity Feed Page-->        
        <div id="activityFeed" data-role="page"> 
            <!--Panel-->            
                <div data-role="panel" id="myPanel" data-display="reveal" data-theme="a" class="ui-response">
                    <div data-role="listview" class="nav-seacrh">
                        <li><a href="#activityFeed"data-rel="close">Activity</a></li>
                        <li><a href="#messagesPage"data-rel="close">Messages</a></li>
                        <li><a href="#profilePage" data-rel="close">Profile</a></li>
                        <li><a href="#settingsPage"data-rel="close">Settings</a></li>
                        <li><a href="#" data-rel="close">Log out</a></li>               
                    </div>
                </div> <!--ends panel-->            
            <div data-role="header">
                <h1>Activity Feed</h1>
                <a href="#myPanel" data-icon="bars" data-role="button" data-iconpos="notext">Panel</a>
            </div>
            <p>Activity Feed Page</p>       
        </div>
<!--End Feed Page-->

<!--Messages  Page-->
        <div id="messagesPage"data-role="page">
            <div data-role="header">
                <h1>Messages</h1>
                <a href="#myPanel" data-icon="bars" data-role="button" data-iconpos="notext">Panel</a>
            </div>  
            <p>Messages Page</p>                                                  
        </div>
<!--Ends Messages Page-->

<!--Profile Page-->
        <div id="profilePage"data-role="page">
            <div data-role="header">
                <h1>Profile</h1>
            <a href="#myPanel" data-icon="bars" data-role="buttons"data-iconpos="notext">Panel</a>  
            </div>
            <div>   
            <p>Profile Page</p>
            </div>


        </div>
<!--Ends Settings Page-->
        <div id="settingsPage"data-role="page">
            <div data-role="header">
                <h1>Settings Feed</h1>
        <a href="#myPanel" data-icon="bars" data-role="buttons" data-iconpos="notext">Panel</a> 
                </div>
                <div>
                <p>Settings Page</p>
                </div>


        </div>
 <!--Ends Settings Page-->

Answer 1

页面链接中的data-rel="close"导致JQM覆盖其点击处理程序以关闭面板。

删除它，它应该导航到href中提到的页面。

JQuery Mobile面板菜单。页面没有链接

1 个答案: