Панель jQuery Mobile не закрывается

У меня небольшая проблема.

См. эту скрипку. У меня есть боковое меню в главах. Теперь я открываю боковое меню и нажимаю на главу 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: На данном этапе я не могу использовать какую-либо другую библиотеку для бокового меню, так как все мое приложение полностью функционально, за исключением этой небольшой проблемы и опубликовано в магазинах.


cordova sidebar jquery panel jquery-mobile
person MysticMagicϡ    schedule 21.04.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

на самом деле это проблема для меня, которую я тоже не мог исправить, но вот решение вашей проблемы без какой-либо библиотеки или чего-то еще:

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

вы можете обратиться к этому сообщению:

пост

person Eslam Soliman    schedule 21.04.2014
comment
Я видел этот код раньше, это копирование/вставка, не так ли? ;) - person Omar; 21.04.2014
comment
на самом деле у меня была такая же проблема раньше, и я нашел ответ в этом сообщении, на которое вы ответили stackoverflow.com/questions/20478094/ :) - person Eslam Soliman; 21.04.2014
comment
ответ изменен и добавлен пост, на который вы ответили, я только хочу помочь ему с ответом, не давая ему еще одну ссылку для обзора, и у меня уже есть этот код в одном из моих проектов, поэтому я получаю его только из файла javascript и публикую его в ответ теперь, чтобы найти ваш пост, мне пришлось искать его снова :) - person Eslam Soliman; 21.04.2014
comment
Спасибо вам обоим :) Это помогло. - person MysticMagicϡ; 21.04.2014