我的网站上有3个菜单。
desktop =经典html菜单+ superfish jQuery
mobile =有slicknav jQuery菜单（包括桌面的每个菜单）
现在我的问题是在slicknav上包含超级鱼的静态菜单。
为此，我想创建一个条件，以在屏幕尺寸减小时更改slicknav类的superfish菜单类。
问题：当尝试使用示例来更改类的简单脚本不起作用时：
<script>
function resize() {
if ( $(window).width() < 739) {
$("#nullo").toggleClass('sf-menu cambioclasse2');
}
else {
$("#nullo").toggleClass('sf-menu sf-menu');
}
}
$(window).on("resize", resize);
resize(); // call once initially
</script>
这是菜单的一个例子
<div id="header" class="clearfix">
<ul id="top-menu">
<ul id="nullo" class="sf-menu">
<li>
<a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div>
<ul>
<li>
<a class="tab_amministra" href="/amministra/gestione_commerciale/" title="">
Commerciale </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_eccellenze/" title="">
Eccellenze </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_aree/" title="">
Aree </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_contabile/" title="">
Contabile </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_certificazioni/" title="">
Certificazioni </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_compensi/" title="">
Compensi </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_trattative/" title="">
Trattative </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_club/" title="">
Club </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_guida/" title="">
Guida </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_pagine/" title="">
Pagine </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_mailing/" title="">
Mailing </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_report/" title="">
Report </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_batching/" title="">
Batching </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_temi_seo/" title="">
Classificazione </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_visite_pagine/" title="">
VIsite pagine </a>
</li>
</ul>
</li>
</ul>
<li><a href="/">Home</a></li>
<li>
<a href="/vacanze_weekend/">
Vacanze </a>
</li>
<li>
<a href="/matrimoni/">
Matrimoni </a>
</li>
<li>
<a href="/meeting/">
Meeting </a>
</li>
</li>
<li></li>
这是因为slicknav重建了没有id的菜单的输出，因此脚本不起作用，因为不存在id“ nullo”
现在如何只用类而不用id创建条件？
或可以对slicknav进行更改？
更新：：我测试了此脚本，并且如果在大屏幕（超级鱼）中打开页面页面并且在移动屏幕中缩小（slicknav）之后可以正常工作，但是如果在小屏幕（slicknav）中打开页面并且在大屏幕中打开之后无法正常工作（超级鱼）。
<script>
function resize() {
if ( $(window).width() > 739) {
$("#nullo").toggleClass('sf-menu sf-menu');
}
else {
}
}
$(window).on("resize", resize);
resize(); // call once initially
</script>
<script>
function resize() {
if ( $(window).width() < 739) {
$(".sf-menu").toggleClass('sf-menu cambioclasse2');
}
else {
}
}
$(window).on("resize", resize);
resize();
</script>
为什么呢？
用此异常代码解决了，我该如何优化呢？：
<script>
if ( $(window).width() > 739) {
$("#nullo").toggleClass('cambioclasse2 sf-menu');
}
else {
}
</script>
<script>
function resize() {
if ( $(window).width() > 739) {
$("#nullo").toggleClass('cambioclasse2 sf-menu');
}
else {
}
}
$(window).on("resize", resize);
resize();
</script>
<script>
function resize() {
if ( $(window).width() > 739) {
$("#nullo").toggleClass('sf-menu sf-menu');
}
else {
}
}
$(window).on("resize", resize);
resize(); // call once initially
</script>
<script>
function resize() {
if ( $(window).width() < 739) {
$(".sf-menu").toggleClass('sf-menu cambioclasse2');
}
else {
}
}
$(window).on("resize", resize);
resize();
</script>
最佳答案
function resize() {
if ($(window).width() > 739) {
$(".sf-menu").toggleClass('sf-menu cambioclasse2');
}
else {
$(".cambioclasse2").toggleClass('cambioclasse2 sf-menu');
}
}
$(window).on("resize", resize);
resize();
该功能应证明能更好地适应异常代码。因为它只会在需要时更改元素的类，如果已经在正确的类中，则不会对其进行修改。