javascript - JQuery Window.Resize切り替えCSSレスポンシブ

Question

HTML 4 Web サイトをResponsiveにするための改造作業がほぼ完了しました。コンテンツ/CSS/ JQueryをロードするためにデバイステストのアプローチを使用したくありません.

私が達成しようとしていること：

ウィンドウサイズが 798px 以上の場合、Web サイトのサブメニューは通常どおり表示され、問題ありません。
ウィンドウサイズが 797px 以下の場合、サブメニューの CSS は jquery.flexnav.js プラグインの CSS に置き換えられます。

どちらの場合も CSS は異なり、歴史的な理由から、異なるままにしておく必要があります。

プラグインがこれを処理するため、スタイルの切り替えに問題はありません。ただし、たとえば、ウィンドウのサイズが 797px から 810+ に変更された場合、要素は引き続き flexnav.js にバインドされます。

798px 以上では、UL/LI 要素から flexnav.js へのすべての接続をクリアする必要があり、797px 以下では、flexnav.js が作動します。

問題：

flexnav.js をクリアできないようです。そのため、サブメニューはウィンドウ 798px 以上で折りたたむことができます。ウィンドウのサイズを 798px 未満に変更してから、798px 以上にサイズを変更しても、flexnav.js は引き続き影響します。偶然にも、これが理由を理解しています。

私が試したこと：

リロードを必要とするのではなく、ウィンドウのサイズ変更時にスタイル/動作が変更されるようにします。

これを自分の ID とクラス名で動作するように調整しました: http://jsfiddle.net/userdude/rzdGJ/1/

(function($) {
    var $window = $(window),
        $ul = $('ul#myone');

    $window.resize(function resize() {
        if ($window.width() < 514) {
            //return $html.addClass('mobile');
            return $( "ul#myone" ).addClass( "flexnav" );
        }

        //$html.removeClass('mobile');
        $( "ul" ).removeClass( "flexnav" )
    }).trigger('resize');
})(jQuery);

私のサンプルコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://urly.be/flexnav.css" rel="stylesheet" type="text/css" media="all and (max-width: 798px)">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>




<ul id="myone" class="flexnav">
  <li>1
    <ul>
        <li>1a
            <ul>
                <li>1b</li>
            </ul>
        </li>
    </ul>
  </li>
</ul>

<script type="text/javascript">
   if ( $(window).width() <= 798) {     

       document.write('<scr'+'ipt src="http://urly.be/js/jquery.flexnav.js" type="text/javascript"></sc'+'ript>');
       document.write('<scr'+'ipt type="text/javascript">jQuery(document).ready(function($){$(".flexnav").flexNav();});</sc'+'ript>');
    }



    </script>
<!-- COMMENTED OUT - ORIGINAL PLUGIN JQUERY <script src="http://www.agilenation.co.uk/custom/temp/flexnav-master/js/jquery.flexnav.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {

            $(".flexnav").flexNav();

        });
    </script>-->

</body>
</html>

javascript - JQuery Window.Resize切り替えCSSレスポンシブ

1 に答える 1

Related

Reference