jQuery Mobile導航故障

Question

當我在主頁並使用頂部的導航欄前往page2然後回到家中時。導航欄出現問題，我不知道爲什麼。我怎樣才能解決這個問題？

小提琴：https://jsfiddle.net/3d1oyx2v/15/

HTML：

<div data-role="page" id="Home"> 
    <div data-role="header" data-position="fixed"> 
     <h1 style="text-align:left; margin-left:40px;">Home</h1> 
<a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

    </div> 
    <!-- /header --> 
    <div data-role="content" id="homeContent"> 
     <p>Home.</p> 
    </div> 
    <!-- /content --> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
    <div data-role="panel" id="bars" data-theme="a"> 
     <!-- panel content goes here --> 
     <ul data-role="listview" class="ui-listview-outer"> 
      <li><a href="#Home">Home</a> 

      </li> 
      <li><a href="#page2">Page 2</a> 

      </li> 
    </div> 
    <!-- /panel --> 
</div> 
<!-- /page --> 
<div data-role="page" id="page2"> 
    <div data-role="header" data-position="fixed"> 
     <h1 style="text-align:left; margin-left:40px;">Page 2</h1> 
<a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

    </div> 
    <!-- /header --> 
    <div data-role="content"> 
     <p>Page 2.</p> 
    </div> 
    <!-- /content --> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
    <div data-role="panel" id="bars" data-theme="b"> 
     <!-- panel content goes here --> 
     <ul data-role="listview" class="ui-listview-outer"> 
      <li><a href="#Home">Home</a> 

      </li> 
      <li><a href="#page2">Tee Times</a> 

      </li> 
     </ul> 
    </div> 
    <!-- /panel --> 
</div> 
<!-- /page --> 

Answer 1

這是因爲你有一個重複的ID（#bars兩個菜單），而陷入困境的結果。

通過改變ID的解決這個問題，使它們是唯一的（例如：#bars1的主頁和#bars2爲第2頁），也圖標鏈接引用相應的，然後它會正常工作（see it on this JSFiddle）

<div data-role="page" id="Home"> 
    <div data-role="header" data-position="fixed"> 
     <h1 style="text-align:left; margin-left:40px;">Home</h1> 
     <a href="#bars1" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

    </div> 
    <!-- /header --> 
    <div data-role="content" id="homeContent"> 
     <p>Home.</p> 
    </div> 
    <!-- /content --> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
    <div data-role="panel" id="bars1" data-theme="a"> 
     <!-- panel content goes here --> 
     <ul data-role="listview" class="ui-listview-outer"> 
      <li><a href="#Home">Home</a> 

      </li> 
      <li><a href="#page2">Page 2</a> 

      </li> 
     </div> 
     <!-- /panel --> 
    </div> 
    <!-- /page --> 
    <div data-role="page" id="page2"> 
     <div data-role="header" data-position="fixed"> 
      <h1 style="text-align:left; margin-left:40px;">Page 2</h1> 
      <a href="#bars2" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 

     </div> 
     <!-- /header --> 
     <div data-role="content"> 
      <p>Page 2.</p> 
     </div> 
     <!-- /content --> 
     <div data-role="footer" data-position="fixed"> 
      <h4>Page Footer</h4> 

     </div> 
     <!-- /footer --> 
     <div data-role="panel" id="bars2" data-theme="b"> 
      <!-- panel content goes here --> 
      <ul data-role="listview" class="ui-listview-outer"> 
       <li><a href="#Home">Home</a> 

       </li> 
       <li><a href="#page2">Tee Times</a> 

       </li> 
      </ul> 
     </div> 
     <!-- /panel --> 
    </div> 
    <!-- /page -->