4

モバイル サイトで 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>

以下は、jQuery スクリプトと共にスクリプトで参照されている HTML のサンプルです。

【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

これとあなたの応答を見て時間を割いてくれたキランとサチン・クルカルニに感謝します。この問題は、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

コードの問題の 1 つは、これに従って使用すべきではない $(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 に答える