1

为了制作一个 HTML 4 网站Responsive，我几乎完成了一项改造工作。我不想使用设备测试方法来加载内容/CSS/JQuery - 相反，我试图忠于响应式想法：一个响应不同窗口大小的网站。

我想要达到的目标：

  1. 在窗口大小为 798 像素或更大时，网站的子菜单会照常显示，没问题。

  2. 在窗口大小为 797 像素或更少时，子菜单的 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>
4

1 回答 1

0

Toggling the class for flexnav will not help after it has been initialized. It adds a lot of inline styles and binds events for the drop downs etc. The only reasonable way to clear flexnav would be to remove the menu element from the DOM and append a new element on the resize event.

Have you tried:

  • setting the data-breakpoint="798" on the parent ul
  • adapting the old menu styles to override the flexnav styles using the .lg-screen selector
  • initializing flexnav only once on domready

Another option might be to have two menu instances, one with the flexnav bindings and one without and just toggle the menu display property on resize, or with a media query:

.old-menu{
    display:none;
}

@media screen and (min-width:798px){
    .old-menu{
        display:inherit;
    }
    .flexnav{
        display:none;
    }
}
于 2013-10-31T14:01:10.813 回答