Question

我正在尝试将导航作为下拉元素运行。

它完美切换，但我遇到的问题是，当我转到一个新的'section id'时，它会将导航元素显示为完全展开。

这是我目前在标题中的内容：

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

非常感谢任何帮助。

修改我通过对链接和div进行切换应用特定的类名来找到解决方法。它似乎与ajax调用有关，因为它将内部页面加载到同一文档中，从而与同名的div ID产生冲突。这post也有助于我找到解决方案，但此时似乎不太理想。

Answer 1

当用户点击菜单项时，您可以调用.slideToggle()功能，以便重置菜单：

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

我还注意到你可能想要改变的其他一些事情：

您选择ID时，您的jQuery选择器不需要标记类型，这是选择对象的最快方法。更改：div#menuBar / a#menu改为：#menuBar / #menu。
您问题中的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）
由于您在同一范围内多次使用相同的选择器，因此可以缓存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>

<强> - UPDATE -

您可以稍微更改上面的代码以适应类而不是ID的使用：

<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空间中，使用文档Ready功能无效。而是使用pageinit。其次是jquery .Live功能已经过时，不适用于最新版本的jq。我没有在这里使用过这种方法，但如果你需要使用它，请用.on函数替换它。第三，正如Ian之前提到的，使用基于类的引用，基于id的引用似乎不适用于这种特殊情况。

所以你的代码看起来像这样

// #page is id of my html page element, replace it with your page id.

$(document).on('pageinit', '#page', function () {   

    $(".menu").click(function() {

        $(".menuBar").slideToggle('fast');  
        return false;
    });

});

使用jQuery Mobile的.slideToggle（）问题

2 个答案: