4

我在移动网站上遇到了 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>

​</p>

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

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

4

3 回答 3

4

感谢 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 导航后，问题得到解决……我在此处发布的原始脚本没有任何问题。

于 2012-09-25T08:44:16.777 回答
0

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

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

于 2012-09-23T17:14:18.800 回答
0

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

于 2012-09-24T06:21:35.053 回答