.slideToggle () проблема с использованием jQuery Mobile

Question

Я пытаюсь заставить мою навигацию работать как раскрывающийся элемент.

Он отлично переключается, но проблема, с которой я сталкиваюсь, заключается в том, что при переходе к новому «идентификатору раздела» элемент навигации отображается как полностью развернутый.

Это то, что у меня сейчас есть в заголовке:

<script type="text/javascript">
 $(document).ready(function(){
 $('div#menuBar').hide(); 
 $('a#menu').click(function(){
 $('div#menuBar').slideToggle('fast');
   return false;
   });
 });
</script>

Моя структура HTML:

<a id="menu" href="#">Menu</a>
<div id="menuBar" data-role="navbar">
     <li><a href="#" data-transition="fade" data-role="button">Link</a></li>
     <li><a href="#" data-transition="fade" data-role="button">Link</a></li>
     <li><a href="#" data-transition="fade" data-role="button">Link</a></li>
     <li><a href="#" data-transition="fade" data-role="button">Link</a></li>
     <li><a href="#" data-transition="fade" data-role="button">Link</a></li>
</div>

Также в моем CSS у меня есть:

#menuBar {
    display:none;
} 

Любая помощь очень ценится.

EDIT Я нашел обходной путь, применив конкретные имена классов к переключаемой ссылке и div. Похоже, что он имеет какое-то отношение к вызовам ajax, так как он загружает внутренние страницы в один и тот же документ, создавая конфликт с разделениями с одинаковыми именами. Эта запись также помогла мне найти решение, но на данный момент оно кажется не совсем идеальным.

Answer 1

Вы можете вызвать функцию .slideToggle(), когда пользователь нажимает на пункт меню, чтобы он сбрасывал меню:

$('#menuBar').find('a').bind('click', function () {
    $('#menuBar').slideToggle('fast');
});

Также я заметил кое-что еще, что вы можете изменить:

1. Селекторам jQuery не требуется тип тега, поскольку вы выбираете идентификаторы, которые являются самым быстрым способом выбора объектов.Измените: div#menuBar / a#menu на: #menuBar / #menu.
2. В HTML в вашем вопросе отсутствуют теги <ul> вокруг тегов <li>.Панель навигации jQuery Mobile должна иметь следующий формат: <div data-role="navbar"><ul><li>...</li></ul></div> (http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html)
3. Поскольку вы используете один и тот же селектор несколько раз в одной и той же области видимости, вы можете кэшировать свой селектор jQuery и повторноиспользуйте его:

.

<script type="text/javascript">
$(function(){
    var $menuBar = $('#menuBar');
    //$menuBar.hide();//this is not necessary if you have the CSS for the #menuBar element to `display: none;`
    $('#menu').click(function(){
        $menuBar.slideToggle('fast');
        return false;
    });
    $menuBar.find('a').bind('click', function () {
        $menuBar.slideToggle('fast');
    });
});
</script>

- ОБНОВЛЕНИЕ -

Вы можете немного изменить вышеуказанный код, чтобы приспособитьиспользование классов вместо идентификаторов:

<script type="text/javascript">
    $('.menu').live('click', function(){
        $.mobile.activePage.find('.menuBar').slideToggle('fast');
        //you can also select the proper `.menuBar` element like this:
        //$(this).find('.menuBar').slideToggle('fast');
        return false;
    });
    $('.menuBar').find('a').live('click', function () {
        $.mobile.activePage.find('.menuBar').slideToggle('fast');
        //you can also select the proper `.menuBar` element like this:
        //$(this).parents('.menuBar:first').slideToggle('fast');
    });
</script>

Примечание: $.mobile.activePage является ссылкой на текущую страницу для веб-сайта jQuery Mobile.Зная это, мы можем найти элементы DOM, которые соответствуют определенным классам только на текущей странице.

Также Примечание: я изменил вызовы .bind() на .live(), чтобы элементы, добавленные после начальной загрузки страницы, все равносвязываться с.Использование .live() означает, что нам не нужно ждать запуска document.ready, чтобы сделать наши привязки, поэтому $(function () {...}); не требуется.

ОБНОВЛЕНИЕ

Примечаниечто по состоянию на jQuery 1.7, .live() было амортизировано.Новый API - .on(), который можно использовать несколькими способами, поэтому вот пример его использования, например .live():

$(document).on('click', ".menuBar a", function () { ... });

Answer 2

В jquery Mobile space использование функции готовности документа неэффективно.вместо этого используйте Pageinit.во-вторых, функция jquery .Live устарела и не будет работать в последней версии jq.Я не использовал этот подход здесь, но если вам нужно использовать его, замените его на функцию .on.в-третьих, как Ян упоминал ранее, используйте ссылки на основе классов, ссылки на основе идентификаторов, похоже, не работают в этом конкретном случае.

, поэтому ваш код будет выглядеть так