Question

我遇到了一个小问题。

请参阅this小提琴。我在章节上有一个侧边栏菜单。现在，我打开侧边栏菜单并单击第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

jQuery Mobile面板没有关闭

1 个答案: