jQuery 모바일 패널이 닫히지 않습니다

Question

작은 문제가 있습니다.

this 피들을 참조하십시오. 챕터에 사이드 바 메뉴가 있습니다. 이제 사이드 바 메뉴를 열고 2 장을 클릭하면 메뉴가 닫히고 2 장이 열립니다. 이제 사이드 바 메뉴에서 2 장을 다시 클릭하면 사이드 바 메뉴가 닫히지 만 그렇지 않습니다.

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

은 제가이 경우에는 무엇을 할 수 있는지 알려 주시기 바랍니다 : 여기에

는 HTML 코드입니다.

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