jQuery Mobile 面板未关闭

Question

我遇到一个小问题。

参见this fiddle 。我在章节上有一个侧边栏菜单。现在，我打开侧栏菜单并单击第 2 章，然后菜单关闭并打开第 2 章。现在，我再次单击侧边栏菜单中的第 2 章，然后侧边栏菜单应该关闭，但事实并非如此。

这是html代码:

<div data-role="page" id="Ch1">
    <div>
        <a href="#leftNavmenuCh1" data-role="button" data-inline="true" data-icon="bars">Chapters</a>

    </div>
    <div id="leftNavmenuCh1" data-role="panel" data-icon='false' data-iconpos="notext" data-position="left" data-display="overlay"
            data-dismissible="true">
        <header class="nav-header">list header</header>
        <ul id="leftMenuCh1" data-role='listview' data-icon='false' class="sidelist"  >
        <li><a href='#Ch1' class='navlink'  >chap 1</a></li>
            <li><a href='#Ch2' class='navlink'  >chap 2</a></li>
            <li><a href='#Ch3' class='navlink'  >chap 3</a></li>
        </ul>
    </div>
    <div data-role='content'>
        content chapter 1
    </div>

</div>

<div data-role="page" id="Ch2">
    <div>
        <a href="#leftNavmenuCh2" data-role="button" data-inline="true" data-icon="bars">Chapters</a>

    </div>
    <div id="leftNavmenuCh2" data-role="panel" data-icon='false' data-iconpos="notext" data-position="left" data-display="overlay"
            data-dismissible="true">
        <header class="nav-header">list header</header>
        <ul id="leftMenuCh2" data-role='listview' data-icon='false' class="sidelist"  >
        <li><a href='#Ch1' class='navlink'  >chap 1</a></li>
            <li><a href='#Ch2' class='navlink'  >chap 2</a></li>
            <li><a href='#Ch3' class='navlink'  >chap 3</a></li>
        </ul>
    </div>
    <div data-role='content'>
        content chapter 2
    </div>

</div>

<div data-role="page" id="Ch3">
    <div>
        <a href="#leftNavmenuCh3" data-role="button" data-inline="true" data-icon="bars">Chapters</a>

    </div>
    <div id="leftNavmenuCh3" data-role="panel" data-icon='false' data-iconpos="notext" data-position="left" data-display="overlay"
            data-dismissible="true">
        <header class="nav-header">list header</header>
        <ul id="leftMenuCh3" data-role='listview' data-icon='false' class="sidelist"  >
            <li><a href='#Ch1' class='navlink'  >chap 1</a></li>
            <li><a href='#Ch2' class='navlink'  >chap 2</a></li>
            <li><a href='#Ch3' class='navlink'  >chap 3</a></li>
        </ul>
    </div>
    <div data-role='content'>
        content chapter 3
    </div>

</div>

请让我知道在这种情况下我能做什么。

P.S:现阶段我无法使用任何其他库作为侧面菜单，因为除了这个小问题并在商店中发布之外，我的整个应用程序功能齐全。

Answer 1

实际上这对我来说是一个问题，我也无法解决，但这里有一个无需任何库或其他东西即可解决您的问题的解决方案:

$(document).on("pageinit", function () {
  $("[data-role=panel] a").on("click", function () {
    if($(this).attr("href") == "#"+$.mobile.activePage[0].id) {
      $("[data-role=panel]").panel("close");
    }
  });
});

检查目标的哈希值是否与当前目标的哈希值相同，然后关闭面板。希望这有帮助。

这是一个现场演示: jsfiddle

您可以引用这篇文章:

post