代码之家 › 专栏 › 技术社区 › seanrco

jQuery.slideDown().hide().show()在iPhone上不工作(Safari Mobile)

mobile-safari jquery-mobile ios iphone jquery

seanrco · 技术社区 · 12 年前

我在移动网站上遇到了jQuery slideDown()、show()、hide()功能的问题。该功能适用于Safari、Chrome和FF的桌面版本。它也适用于用户代理设置为iPhone的Safari。然而,当加载页面iPhone(Safari)时,该功能不起作用。。。当您选择应该切换显示/隐藏的链接时,不会发生任何事情(没有错误)。该网站使用以下版本的jQuery&jQuery手机:

<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/

有人以前遇到过这个问题,或者有什么建议吗?谢谢你的帮助!

3 回复 | 直到 12 年前

seanrco 12 年前

谢谢Kiran&感谢萨钦·库尔卡尼花时间研究这件事和你的回应。事实证明,这个问题与jQueryMobile的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导航后,问题得到了解决。。。我在这里发布的原始脚本没有任何问题。

Kiran 12 年前

代码的一个问题是您使用的是$(document).ready(),根据以下内容不应该使用: http://jquerymobile.com/test/docs/api/events.html 。

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

sachin kulkarni 12 年前

你能尝试附加一个事件处理程序来点击选择器的事件吗 ('.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/