-1

サイドバーにカートを表示するショッピングカートプラグインと連動するdivがあります。

私が構築しているWebサイトは応答性が高く、画面サイズが1024px未満の場合、デザインでは「アイテム」divがサイトのヘッダーに移動します。

メディアクエリでdivを非表示にして表示しようとしましたが、どちらも同じIDを持っているので、1024でサイドバーに「アイテム」があり、画面のサイズがその下にある場合は「アイテム」を削除します。サイドバーから、ヘッダーに追加します。

これは可能ですか？

これが簡単な修正のように思われる場合は申し訳ありませんが、

4

2 に答える 2

1

おそらくこのようなものです（テストされていませんが、アプローチの一般的なアイデアを提供するはずです）。基本的に、ウィンドウサイズのサイズ変更をチェックします。1024未満の場合、＃items divは削除され、＃headerに追加されます。それ以外の場合は、ヘッダーにすでに追加されていると仮定して、＃sidebarに再追加されます。

    function itemsToHeader(){


        $items = $('#items');

        if( $(window).innerheight() < 1024 ){

            if( $('#header').find('#items').length <= 0 ){
                $items.remove().appendTo('#header');
            }

        }else{
            if( $('#header').find('#items').length > 0 ){
                $items.remove().appendTo('#sideBar');
            }
        }

    }

    $(window).on('resize', function(){

        itemsToHeader();

    });

    itemsToHeader();
于 2012-05-05T06:47:06.023 に答える
1

jQueryを使用してウィンドウ幅を確認し、サイズに応じて重要なdivを表示および非表示にすることができます。

if($(window).width() >= 1024) {
      $("#div1").show();
      $("#div2").hide();
} else {
      $("#div1").hide();
      $("#div2").show();
}
于 2012-05-05T06:37:40.757 に答える