Question

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

我想要实现的目标：

在窗口大小为798px或更高时，网站的子菜单显示为它总是有，没问题。
在窗口大小为797px或更低时，子菜单的CSS被替换使用jquery.flexnav.js插件。

在这两种情况下，CSS都是不同的，并且由于历史原因它们需要保持不同。

切换样式没有问题，因为插件处理这个问题。但是，当窗口从797px调整为810+时，元素仍然绑定到flexnav.js。

在798px或更高时，需要清除所有与flexnav.js的连接的UL / LI元素，并且在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>

Answer 1

在初始化后，切换flexnav的类将无济于事。它添加了许多内联样式并为下拉列表绑定事件等。清除flexnav的唯一合理方法是从DOM中删除菜单元素并在resize事件上追加一个新元素。

你试过了吗？

在父ul
使用.lg-screen选择器
仅在domready上初始化flexnav一次

另一个选项可能是有两个菜单实例，一个包含flexnav绑定，另一个没有，只需在调整大小或媒体查询时切换菜单显示属性：

.old-menu{
    display:none;
}

@media screen and (min-width:798px){
    .old-menu{
        display:inherit;
    }
    .flexnav{
        display:none;
    }
}

JQuery Window.Resize切换CSS响应

1 个答案: