jQuery .slideDown() .hide() .show() 无法在 iPhone (Safari Mobile) 上运行

Question

我在移动网站上遇到了 jQuery slideDown()、show()、hide() 功能的问题。该功能适用​​于 Safari、Chrome 和 FF 的桌面版本。它还适用于将用户代理设置为 iPhone 的 Safari。但是，当加载页面 iPhone (Safari) 时，该功能不起作用...当您选择应该切换显示/隐藏的链接时，什么也没有发生(没有错误)。该站点使用以下版本的 jQuery 和 jQuery Mobile:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

下面是脚本中引用的 HTML 示例以及 jQuery 脚本:

[HTML 示例]

<div id="body" class="body-content default-copy">
    Sed eget vehicula dui. Ut feugiat, augue ac ullamcorper varius, tellus nunc aliquam...
    <br>
    <p class="body-content-more default-copy-hidden-more" style="float: right; width: 150px;
        text-align: right; text-decoration: none;">
        <a href="#" class="see_more" style="text-decoration: none;">&gt; See More</a></p>
    <br>
</div>
<div id="body" class="body-content default-copy-full" style="display: none;">
    Sed eget vehicula dui. Ut feugiat, augue ac ullamcorper varius, tellus nunc aliquam
    metus, sed cursus magna felis vel enim. Maecenas elementum, odio eget gravida suscipit,
    felis diam aliquam magna, ut vestibulum augue magna in tortor. Sed nibh justo, iaculis
    ac lacinia non, pellentesque eu erat. Nam mollis, urna at gravida sodales, felis
    nisl hendrerit velit, non ornare sapien purus ut orci. Donec nec augue libero, eu
    tincidunt ipsum. Pellentesque at lacus augue, et egestas enim. Quisque ac dui mi,
    et eleifend nulla. Integer quis elit eget nisl fermentum blandit at in eros. Vestibulum
    a est nisl. Maecenas eget nisl arcu, quis tincidunt risus. Aliquam erat volutpat.
    Nullam lacinia venenatis libero, non imperdiet turpis vestibulum eget. Donec fermentum
    ullamcorper elementum.<br>
    <p class="body-content-more default-copy-hidden-less" style="float: right; width: 150px;
        text-align: right; text-decoration: none;">
        <a href="#" class="see_less" style="text-decoration: none;">&gt; See Less</a></p>
    <br>
</div>

[jQuery 脚本]

$(document).ready(function () {

    $('.see_more').click(function () {

        //divs to hide
        $(".body-content.default-copy").hide();
        $("p.body-content-more.default-copy-hidden-more").hide();

        //divs to show
        $(".body-content.default-copy-full").slideDown(500); 
        $("p.body-content-more.default-copy-hidden-less").show();

    });

    $('.see_less').click(function () {

        //divs to hide
        $(".body-content.default-copy-full").hide();
        $("p.body-content-more.default-copy-hidden-less").hide();

        //divs to show
        $(".body-content.default-copy").slideDown(500);
        $("p.body-content-more.default-copy-hidden-more").show();

    });

});​

如果有帮助，这里还有一个 jsfiddle 链接:http://jsfiddle.net/GwfJ8/

有没有人遇到过这个问题或者有什么建议？感谢您的帮助!

Answer 1

感谢 Kiran 和 sachin kulkarni 花时间查看此内容以及您的回复。这个问题原来与 jQuery Mobile 的 Ajax 导航选项有关。它默认启用，并导致我的脚本(和其他一些功能)出现问题。显然这是一个常见问题，经验丰富的 jQuery 移动开发人员通常首先会禁用此选项。添加以下代码:

<script type="text/javascript"> 
    $(document).bind("mobileinit", function () {
        // jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
        // when navigating from a mobile to a non-mobile page), especially when going back, hence disabling it.
        $.extend($.mobile, {
            ajaxEnabled: false
        });
    }); 
</script>

...在 jQuery 移动脚本之前:

<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

... 禁用 Ajax 导航。禁用 Ajax 导航后，问题得到解决...我在此处发布的原始脚本没有任何问题。