• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

[复制链接]
菜鸟教程小白 发表于 2022-12-13 16:36:40 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

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



Best Answer-推荐答案


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

关于jQuery .slideDown() .hide() .show() 在 iPhone (Safari Mobile) 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12552042/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap