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/

有人之前遇到过这个问题或者有什么建议吗？谢谢您的帮助！

- seanrco

---

附加信息：因此，我决定启用Safari调试控制台（在iPhone上），它检测到1个错误[HTML：错误-视口参数键“target-densitydpi”未被识别和忽略]。然而，即使有错误消息，在启用调试控制台后，jQuery脚本功能仍然完美运行！如果我禁用调试控制台并清除网站数据，则脚本将再次停止工作。 - seanrco

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 mobile 脚本之前：

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

...禁用Ajax导航。禁用Ajax导航后，问题得到解决...我在这里发布的原始脚本可以正常运行，没有任何问题。

- seanrco

Answer 2

你能试着为选择器('.see_less' / '.see_more')附加一个点击事件处理程序吗？

这是代码。

$(".see_more").live("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").live("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();

}); 

你可以参考链接附加事件处理程序http://api.jquery.com/live/

- sachin kulkarni

Answer 3

你的代码有一个问题，就是你正在使用 $(document).ready()，但根据这个链接 http://jquerymobile.com/test/docs/api/events.html，它不应该被使用。

应该使用 $(document).bind('pageinit')，而不是 $(document).ready()。

- Kiran

---

谢谢回复。我会尝试一下，看看是否有所改善。 - seanrco