时间戳

首页 > 解决方案 > 如何跟踪菜单中的 CSS 类？

javascript - 如何跟踪菜单中的 CSS 类？

问题描述

我们有以下菜单，其ul > li > a结构中添加了 CSS 类到<a>标签中。当断点小于 768px 时，我们要删除 CSS 类。在页面加载时，我可以毫无问题地添加和删除 CSS 类，但是如果将窗口大小调整为大于 768 像素（宽度），我将无法重新添加 CSS 类。

棘手的部分是 CSS 类可能并不总是color--red例如。它们可能是不同的，bkg--black或者其他的。我正在考虑为 each 存储一个数组<a>，但发现在on loadandresize函数中，它们不接受数组。

如果使用 jQuery 调整窗口大小，我将如何跟踪每个 CSS 类<a>并将它们添加回来？

这是我们尝试过的

$(function() {
  $(window).on('load', function() {
    if($(window).width() < 768) {
      var el = $('#someid');
      el.find("a").prop("class", function(i, cls) {
        return cls.replace(/(^|\s)(color)--\S+/g, '');
      });
    }
  });
  
  $(window).resize(function() {
    if($(window).width() < 768) {
      var el = $('#someid');
      el.find("a").prop("class", function(i, cls) {
        return cls.replace(/(^|\s)(color)--\S+/g, '');
      });
    }
    else {
      // Stuck here. 
    }
  });
});
.color--red { color: red; }
.color--blue { color: blue; }
.color--green { color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="someid">
<li><a class="color--red">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--blue">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--green">Seamlessly brand equity invested infomediaries for.</a></li>
</ul>

标签： javascriptjqueryhtmlcss

解决方案

我让它与 CSS 一起工作。

@media screen and (min-width: 768px) {
  .color--red { 
    color: red; 
  }

  .color--blue { 
    color: blue; 
  }
  .color--green { 
    color: green; 
  }
}

.color--red { 
  color: initial; 
}

.color--blue { 
  color: initial; 
}
.color--green { 
  color: initial; 
}
<ul id="someid">
<li><a class="color--red">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--blue">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--green">Seamlessly brand equity invested infomediaries for.</a></li>
</ul>

推荐阅读