当屏幕分辨率在JavaScript中小于767px时添加类

我创建了一个引导菜单，当屏幕分辨率小于767px时，我需要添加一些类和属性。我的代码：

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

$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
var windowWidth=$（window.width（）；
if（windowWidth<767）$（.navbar-nav-ul”）.addClass（“下拉菜单”）和&$（.navbar-nav-li“，.navbar-nav-ul”）.removeClass（“父级”、“子级”）；
});
});

---

我想将属性data toggle=“dropdown”添加到具有ul子目录的链接中，即

等。
问题似乎出在
和
之间

$（.navbar-nav-ul”）.addClass（“下拉菜单”）
和
$（.navbar-nav-li“，.navbar-nav-ul”）.removeClass（“父级”、“导航子级”）

相反，它应该是这样的

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

if（窗口宽度<767）{
$（“.navbar nav ul”）.addClass（“下拉菜单”）；
$（“.navbar-nav-li”，“.navbar-nav-ul”）.removeClass（“父级”，“子级”）；
}

同样，使用CSS媒体查询也可以实现这一点
问题似乎出在
&
之间

$（.navbar-nav-ul”）.addClass（“下拉菜单”）
和
$（.navbar-nav-li“，.navbar-nav-ul”）.removeClass（“父级”、“导航子级”）

相反，它应该是这样的

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

if（窗口宽度<767）{
$（“.navbar nav ul”）.addClass（“下拉菜单”）；
$（“.navbar-nav-li”，“.navbar-nav-ul”）.removeClass（“父级”，“子级”）；
}

同样，也可以使用CSS媒体查询来实现这一点（作为备选方案）

此示例在屏幕小于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 */
  }
}

Mediaqueries（根据要求作为备选方案）

此示例在屏幕小于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 */
  }
}

如果您使用@media querys（），则无需使用JavaScript即可轻松实现此类请求。@roberrt可以在我的示例中演示如何实现它？当然！让我写一些代码；）！如果您使用@media querys（），则无需使用JavaScript即可轻松实现此类请求。@roberrt可以在我的示例中演示如何实现它？当然！让我写一些代码；）！当用户更改屏幕分辨率时，会触发my resize（jquery代码）。是否可以知道屏幕的宽度并查看它以添加类并删除？当用户更改屏幕分辨率时，会触发my resize（jquery代码），有没有可能知道屏幕的宽度并通过查看它来添加类和删除类？哦，没有。。。我知道这一点）我只是想删除不必要的类并添加新的类，而不是不。。。我知道这一点）我只是想删除不必要的类，然后添加新的类