JQuery Window.调整大小切换 CSS 响应式

JQuery Window.Resize switching CSS Responsive

本文关键字：CSS 响应 Window 调整 JQuery      更新时间：2023-09-26

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

我想要实现的目标：

  1. 在窗口大小为 798 像素或更大时，网站的子菜单显示为它总是有，没问题。

  2. 在窗口大小为 797px 或更小时，子菜单的 CSS 将被替换与jquery.flexnav.js插件。

在这两种情况下，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>
初始化后，切换

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

你试过吗：

  • 在父 UL 上设置数据断点="798"
  • 调整旧菜单样式以使用.lg-screen选择器覆盖 FlexNav 样式
  • 在 Domready 上仅初始化一次 flexnav

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

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