Изменение имени класса с помощью jquery-js при изменении размера экрана

Question

У меня на сайте 3 меню.

рабочий стол = классическое html меню + супер-рыба jquery

mobile = есть slicknav jquery menu (включите каждое меню рабочего стола)

теперь моя проблема - включить статическое меню суперфиш на slicknav.

для этого я хочу создать условие для изменения класса меню суперфиш с классом 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> 

это пример меню

  <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 перестраивает вывод меню без идентификатора, поэтому скрипт не работает, потому что не существует идентификатор "nullo"

Теперь, как создать условие только с классом, а не с идентификатором??

или можете применить изменение к slicknav?

обновление:: я проверил этот скрипт, и это работает, если открыть страницу страницы на большом экране (суперфиш) и после уменьшения на экране мобильного устройства (slicknav), но не работает, если открыть страницу с маленьким размером (slicknav) и после перехода на большой экран (SUPERFISH).

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

Answer 1

function resize() {
    if ($(window).width() > 739) {     
        $(".sf-menu").toggleClass('sf-menu cambioclasse2');
    }
    else {
        $(".cambioclasse2").toggleClass('cambioclasse2 sf-menu');
    }
}
$(window).on("resize", resize);
resize();

Эта функция должна обеспечить меньшую лучшую адаптацию неправильного кода. поскольку он изменит класс элемента только в случае необходимости и не изменит его, если он уже находится в правильном классе.