0

ここにある多くの投稿とは対照的に、以下のスクリプトは Safari と Firefox ではうまく機能しますが、Chrome ではうまく機能しません。div "#bg-4-1" は、-1000 の z-index でページをロードすることになっています。次に、"h3#bubbleh3" をクリックすると (ネーミングが手に負えなくなりました)、z-インデックスは 4 にシフトします。

これは他の場所でも見事に機能します。全体を包み込みました$(window).load(function()が、何も変わりません。

コードは次のとおりです。

        <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                active: false
            });
            $(document).ready(function() {
                $(".ui-accordion").bind("accordionchange", function(event, ui) {
                  if ($(ui.newHeader).offset() != null) {
                    ui.newHeader, // $ object, activated header
                    $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-0}, 500);
                  }
                });
             });
            $("h3#bubbleh3").on("click", function(event, ui) {   
                setTimeout(function() {            
                    if ($("section#bubble").css("display") === "none") {
                       $("#bg4-1").css("z-index", "-1000");
                    } else if ($("section#bubble").css("display") === "block") {
                       $("#bg4-1").css("z-index", "4");
                    }
                }, 350);
            });
            $("h3#mermaidh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#thingstellh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#sumpartsh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#knivesh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#redgreenh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#resurrecth3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
        });
    </script>

洞察をありがとう！

4

2 に答える 2

3

ええ、それはこの答えと同じ理由です。メソッドは、配置されていない要素には影響しません。つまり、要素は、絶対配置、相対配置、または固定のいずれかでなければなりません。

         <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                active: false
            });
            $(document).ready(function() {
                 $("#bg4-1").css("display","none");
                $(".ui-accordion").bind("accordionchange", function(event, ui) {
                  if ($(ui.newHeader).offset() != null) {
                    ui.newHeader, // $ object, activated header
                    $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-0}, 500);
                  }
                });
             });
            $("h3#bubbleh3").on("click", function(event, ui)
             {   
                setTimeout(function() {            
                    if ($("section#bubble").css("display") === "none") {

                       $("#bg4-1").css("z-index", "-1000");
                       $("#bg4-1").css("display","none");
                    } else if ($("section#bubble").css("display") === "block") {
                         $("#bg4-1").css("display","block");
                       $("#bg4-1").css("z-index", "4");
                    }
                }, 350);
            });
            $("h3#mermaidh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#thingstellh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#sumpartsh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#knivesh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#redgreenh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#resurrecth3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
        });

これらの行を変更するだけで、Chrome で正常に動作します。チェックしてください。これらの問題の詳細については、私のブログを参照してください。その中で記事を書いています

于 2012-12-11T07:04:45.437 に答える
0

これがここでの取引であることを確認しました: z-index が iPad および Google Chrome 22 で正しくレンダリングされない

コンテキストのスタック。Chrome では、「スタッキング コンテキストは、ドキュメント内の任意の場所で、次のいずれかの要素によって形成されます。

the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
elements with an opacity value less than 1. (See the specification for opacity)

" 私の場合、div#bg4-1 は固定 div 内にあるため、kills はページ全体の後ろに後退することができます。Bulocks.

于 2012-12-12T06:34:05.093 に答える