为了使HTML 4网站具有响应性，我几乎完成了翻新工作。我不想使用设备测试方法来加载内容/ CSS / JQuery-相反，我试图忠于响应式想法：一个响应不同窗口大小的网站。
我想要达到的目标：
窗口大小为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>
最佳答案
在初始化类后，将类切换为flexnav将无济于事。它添加了许多内联样式并绑定了下拉菜单等事件。清除flexnav的唯一合理方法是从DOM中删除menu元素，并在resize事件上添加一个新元素。
你有没有尝试过：
在父ul上设置data-breakpoint =“ 798”
使用.lg-screen选择器调整旧菜单样式以覆盖flexnav样式
在domready上仅初始化一次flexnav
另一个选项可能是有两个菜单实例，一个带有flexnav绑定，一个没有，仅在调整大小时切换菜单显示属性，或者带有媒体查询：
.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/