jQuery Mobile导航故障

Question

当我在主页并使用顶部的导航栏转到第2页然后回到家。导航栏出现故障，我不知道为什么。我该如何解决这个问题？

小提琴：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，第2页为#bars2），图标链接也相应地引用，然后它会正常工作（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 -->