addClass, когда разрешение экрана меньше 767 пикселей в JavaScript

Question

Я создал меню начальной загрузки, мне нужно добавить некоторые классы и атрибуты, когда разрешение экрана меньше 767 пикселей. Мой код:

<li class="item-104 deeper parent"> 
    <a href="#">О министерстве</a> 
    <ul class="nav-child unstyled small"> 
     <li class="item-113"><a href="#">Новости</a> 
     </li> 
     <li class="item-134"><a href="#">Подразделения Министерства</a> 
     </li> 
     <li class="item-135 deeper parent"> 
     <a href="#">Подведомственные учреждение министерства</a> 
      <ul class="nav-child unstyled small"> 
       <li class="item-159"><a href="#">ФОК «ЖАР» МВД Республики Узбекистан</a> 
       </li> 
      </ul> 
     </li> 
     <li class="item-136"><a href="#">Прием на службу в органы внутренних дел</a> 
     </li> 
     <li class="item-177"><a href="#">Тендеры</a> 
     </li> 
    </ul> 
</li> 

<script> 
    $(document).ready(function() { 
     $(window).resize(function(){ 
     var windowWidth = $(window).width(); 
     if(windowWidth < 767)$(".navbar-nav ul").addClass("dropdown-menu") && $(".navbar-nav li",".navbar-nav ul").removeClass("parent","nav-child"); 
     }); 
    }); 
</script> 

, и я хочу, чтобы добавить атрибут данных-тумблер = «выпадающий» по ссылке, которая имеет подкаталог с ул, т.е. <li><a href="#" data-toggle="dropdown"><ul><li> т.д.

Answer 1

Проблема, кажется, с && между

$(".navbar-nav ul").addClass("dropdown-menu") и $(".navbar-nav li",".navbar-nav ul").removeClass("parent","nav-child");

Вместо этого он должен быть, как это

if (windowWidth < 767) { 
     $(".navbar-nav ul").addClass("dropdown-menu"); 
     $(".navbar-nav li", ".navbar-nav ul").removeClass("parent", "nav-child"); 
    } 

Кроме того, это то же самое может быть достигнуто с помощью CSS медиазапросы

Answer 2

Mediaqueries (в соответствии с просьбой в качестве альтернативы)

@media screen and (max-width: 800px) { 
    body { 
    background-color: #FF0; 
    } 
} 

Этот пример изменяет цвет фона тела до желтого всякий раз, когда экран экрана нет чем 800 пикселей.

Как вы применяете это в своем случае?

Применить все классы, которые вы хотите использовать заранее, и обернуть разметку классов, которые необходимо вызвать в запросах на медиа.

@media screen and (max-width: 800px) { 
    .dropdown-menu { 
    /* CSS that invokes the dropdown */ 
    } 
} 
@media screen and (min-width: 801px) { 
    .nav-child { 
    /* CSS that is being used in medium/large screens */ 
    } 
}