Javascript 调整屏幕大小时使用jquery js更改类名

我的网站上有3个菜单

桌面=经典html菜单+superfish jquery

mobile=拥有slicknav jquery菜单（包括桌面的每个菜单）

现在我的问题是在slicknav上包含superfish的静态菜单

为此，我想创建一个条件，当屏幕尺寸减小时，将superfish菜单类更改为slicknav类

问题：当尝试使用示例时，更改类的简单脚本不起作用：

<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> 

函数resize（）{
如果（$（window.width（）<739）{
$（“#nullo”）.toggleClass（'sf-menu-cambioclasse2'）；
}
否则{
$（“#nullo”）.toggleClass（'sf-menu-sf-menu'）；
}
}
$（窗口）。打开（“调整大小”，调整大小）；
调整大小（）；//最初打一次电话

这是一个菜单示例

  <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应用更改

更新：：我测试了这个脚本，如果在大屏幕（superfish）中打开页面，在移动屏幕（slicknav）中使用reduce之后，这个脚本可以工作，但是如果在小屏幕（slicknav）中打开页面，在进入大屏幕（superfish）之后，这个脚本就不工作了

函数resize（）{
如果（$（window.width（）>739）{
$（“#nullo”）.toggleClass（'sf-menu-sf-menu'）；
}
否则{
}
}
$（窗口）。打开（“调整大小”，调整大小）；
调整大小（）；//最初打一次电话
函数resize（）{
如果（$（window.width（）<739）{
$（“.sf-menu”）.toggleClass（'sf-menu-cambioclasse2'）；
}
否则{
}
}
$（窗口）。打开（“调整大小”，调整大小）；
调整大小（）；

为什么?

解决了这个异常代码，我如何优化它？：

<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>

如果（$（window.width（）>739）{
$（“#nullo”）.toggleClass（“cambioclasse2 sf菜单”）；
}
否则{
}
函数resize（）{
如果（$（window.width（）>739）{
$（“#nullo”）.toggleClass（“cambioclasse2 sf菜单”）；
}
否则{
}
}
$（窗口）。打开（“调整大小”，调整大小）；
调整大小（）；
函数resize（）{
如果（$（window.width（）>739）{
$（“#nullo”）.toggleClass（'sf-menu-sf-menu'）；
}
否则{
}
}
$（窗口）。打开（“调整大小”，调整大小）；
调整大小（）；//最初打一次电话
函数resize（）{
如果（$（window.width（）<739）{
$（“.sf-menu”）.toggleClass（'sf-menu-cambioclasse2'）；
}
否则{
}
}
$（窗口）。打开（“调整大小”，调整大小）；
调整大小（）；

---

该功能应能更好地适应异常代码。因为它只会在需要时更改元素的类，如果它已经在正确的类中，则不会修改它。

感谢您的回答，但不起作用，我尝试了另一个脚本，这项工作仅从桌面到手机，请阅读我在第一篇文章中的更新，就像我说的，如果您使用$（“.sf菜单”），然后在元素上使用.toggleClass，脚本第二次将无法工作，因为$（“.sf menu”）将不再存在，因为它现在将是cambioclass2。尝试我建议的第二部分，添加并删除该类，然后调整cambioclass2类以覆盖您需要的sf菜单类的样式。如果已使用异常代码解决了该问题，您可以改进此简化代码吗？，查看第一个帖子我添加了一个较小的版本，您可以在顶部添加该版本，该版本应取代所有其他版本

<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();