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>

我希望将属性data-toggle =“dropdown”添加到具有ul的子目录的链接，即<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

媒体查询（根据要求提供）

@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 */
  }
}

在JavaScript中屏幕分辨率小于767px时的addClass

2 个答案: