jQuery Mobile panel not getting closed

Question

I am having a small issue.

See this fiddle. I have a sidebar menu on Chapters. Now, I open the sidebar menu and click on Chapter 2, then the menu gets closed and Chapter 2 is opened. Now I again click on Chapter 2 in side bar menu, then the sidebar menu should get closed, but it doesn't.

Here is html code:

<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>

Please let me know what I could do in this case.

P.S: I am not able to use any other library for side menu at this stage, as my whole application is fully functional except this small issue and published in stores.

Answer 1

actually it's a problem for me i could not fix too , but here is a solution for your problem without any library or something :

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

which check if the hash of your target is the same like the current one then it close the panel . hope this help .

and here is a live demo : jsfiddle

you can refer to this post :

post