Fatal编程技术网
  • jquery/
  • 使用jqueryMobile导航回首页后，面板菜单没有响应

使用jqueryMobile导航回首页后，面板菜单没有响应

jquery jquery-mobile mobile

使用jqueryMobile导航回首页后，面板菜单没有响应,jquery,jquery-mobile,mobile,panel,Jquery,Jquery Mobile,Mobile,Panel,我在使用jQuery mobile时遇到了一个问题。我正试着按照刚才解释的那样设置面板 这是我的密码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1">

我在使用jQuery mobile时遇到了一个问题。我正试着按照刚才解释的那样设置面板

这是我的密码：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/panelfix.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<!-- main page -->
<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Virksomheds Booking">

    <!-- header -->
    <div data-role="header">
        <h1>Virksomheder</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
    </div>
    <!-- /header -->

    <!-- content -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">

        <h1>Virksomheds Liste</h1>
    <div data-role="collapsibleset">
      <div data-role="collapsible" data-inset="false">
        <h3>Lego</h3>
        <table>
          <tr>
            <th>
                <label for="contactperson"></label>
                <label for="phone"></label>
                <label for="mail"></label>
            </th>
            <th>
                <img src="img/lego.jpeg" alt="Lego" height="80" width="80">
            </th>
          </tr>
        </table>
        <button>Book</button>
      </div>
    </div>
        <div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->


    </div>
    <!-- /content -->

    <!-- Panel left side -->
    <div data-role="panel" data-display="push" data-theme="b" id="nav-panel">

        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Luk Menu</a></li>
                <li><a href="#">Front</a></li>
                <li><a href="#panel-responsive-page2">Map</a></li>
        </ul>

    </div>
    <!-- /Panel left side -->

    <!-- Right side form for booking -->
    <div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
        <form class="userform">
            <h2>Booking oplysninger</h2>

            <label for="name">Navn:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

            <label for="mail">Mail:</label>
            <input type="text" name="mail" id="mail" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <label for="mobil">Mobil:</label>
            <input type="text" name="mobil" id="mobil" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <div class="ui-grid-a">
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>
    </div>
    <!-- Right side form for booking -->

</div>
<!-- /main page End -->

<!-- Page 2 Start-->
<div data-role="page" id="panel-responsive-page2">

    <!-- header -->
    <div data-role="header">
        <h1>Kort</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div>
    <!-- /header -->

    <!-- content -->
    <div role="main" class="ui-content jqm-content">

        <img src="img/oversigt.png" alt="Oversigt" style="max-width:100%">


    </div>
    <!-- /content -->

    <!-- Panel left side -->
    <div data-role="panel" data-display="push" data-theme="b" id="nav-panel">

        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Luk Menu</a></li>
                <li><a href="#panel-responsive-page1">Front</a></li>
                <li><a href="#">Map</a></li>
        </ul>

    </div>
    <!-- /Panel left side -->

</div>
<!-- Page 2 End -->



</body>
</html>
我还创建了一个JSFIDLE

任何帮助都将不胜感激

因为两个面板使用相同的id。id应该是唯一的，或者使用外部面板。我认为外部面板听起来是正确的解决方案。但我不知道该怎么做。你能补充一下吗？那将是一个很大的帮助！！外部面板易于实现。检查这个谢谢@Omar。我会留意的。你帮了大忙！ 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/panelfix.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

setTimeout(function(){
    $.mobile.changePage('#page2',{transtion:'none'});   
},200);