Question

我在移动网站上遇到jQuery slideDown（），show（），hide（）功能的问题。该功能适用于桌面版Safari，Chrome和FF。它也适用于Safari，用户代理设置为iPhone。但是，当加载页面iPhone（Safari）时功能不起作用...当您选择应该切换显示/隐藏的链接时，没有任何反应（没有错误）。该网站使用以下版本的jQuery＆amp; 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 Script]

$(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＆amp; sachin kulkarni花时间看看这个以及你的反应。该问题与jQuery Mobile的Ajax导航选项有关。它默认启用，导致我的脚本出现问题（以及其他一些功能）。显然这是一个常见的问题＆amp;经验丰富的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导航后问题得到解决...我在此处发布的原始脚本没有任何问题。

Answer 2

您的代码存在的一个问题是您使用的是$（document）.ready（），不应该根据此使用：http://jquerymobile.com/test/docs/api/events.html。

Use $(document).bind('pageinit'), not $(document).ready()

Answer 3

您是否可以尝试附加事件处理程序以单击选择器的事件（'.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/

jQuery .slideDown（）。hide（）。show（）无法在iPhone上运行（Safari Mobile）

3 个答案: