为了使 HTML 4 网站响应，我几乎完成了改造工作。我不想使用设备测试方法来加载内容/CSS/JQuery - 相反，我试图忠于响应式想法:一个响应不同窗口大小的网站。
我想要实现的目标:
在窗口大小为 798 像素或更大时，网站的子菜单显示为 一直都有，没问题。
在窗口大小为 797 像素或更小时，子菜单的 CSS 被替换 使用 jquery.flexnav.js 插件。
在这两种情况下，CSS 是不同的，并且由于历史原因，它们需要保持不同。
切换样式没有问题，因为插件会处理这个问题。但是，当窗口的大小从 797px 调整到 810+ 时，例如 - 元素仍然绑定(bind)到 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 类将无济于事。它添加了许多内联样式并为下拉菜单绑定(bind)事件等。清除 flexnav 的唯一合理方法是从 DOM 中删除菜单元素并在调整大小事件上附加一个新元素。
你试过吗:
- 在父 ul 上设置 data-breakpoint="798"
- 使用
.lg-screen选择器调整旧菜单样式以覆盖 flexnav 样式 - 仅在 domready 上初始化 flexnav 一次
另一种选择可能是有两个菜单实例，一个有 flexnav 绑定(bind)，一个没有，只是在调整大小或媒体查询时切换菜单显示属性:
.old-menu{
display:none;
}
@media screen and (min-width:798px){
.old-menu{
display:inherit;
}
.flexnav{
display:none;
}
}
关于javascript - JQuery Window.Resize 切换 CSS 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19707962/