@media Query 是否覆盖了我的 jQuery 的规则？答案

【问题标题】：Are @media Query Overriding the Rulings of my jQuery?@media Query 是否覆盖了我的 jQuery 的规则？
【发布时间】：2018-01-20 04:41:00
【问题描述】：

我在 angularJS 控制器中使用 jquery 为我的导航栏创建了一个下拉菜单：

$(".fa-bars").click(function() {
  console.log('running ', dropDownDisplayed)
  if (dropDownDisplayed == false) {
    $("#links").css("display", "flex");
    dropDownDisplayed = true;
    console.log('dropdown displayed?', dropDownDisplayed);
  } else if (dropDownDisplayed == true) {
    $("#links").css("display", "none");
    dropDownDisplayed = false;
    console.log('dropdown displayed?', dropDownDisplayed);
  }
});

function menuChecker() {
  if ($scope.loginStatus == true && $(window).width() <= 1024) {
    $("#links").css("top", "240px");
  }
}

这是下拉链接的默认 CSS

@media (max-width: 1024px) {
  #links {
    display: none;
    position: absolute;
    flex-direction: column;
    width: 240px;
    height: 3em;
    top: 140px;
    right: 0px;
    z-index: 1;
  }
}

但是，当$scope.loginStatus == true 且窗口宽度小于 1024 时，值 '#links' top 规则不会从 140px 更改为 240px。 loginStatus 设置为 true 为什么不是 menuCheckerchecking登录状态？

请注意，我也在使用引导程序，所以我不知道这是否是问题的一部分。

【问题讨论】：

为什么 menuChecker 不检查 loginStatus？ - 谁知道？它甚至被称为并不明显。 stackoverflow.com/help/mcve 是必需的。考虑提供一种方法来复制问题。
一般来说答案是：不。函数css() 将属性直接应用于元素，作为内联样式。因此，它总是会覆盖您在其他地方可能拥有的任何 CSS（除非您使用 !important 当然，但这不言而喻）。如果它不起作用，那么某处出现了问题。

标签： jquery css angularjs media-queries

【解决方案1】：

menuChecker 仅在 document.ready 中声明，从未调用过。这已得到补救。

$(document).ready(function(){

                menuChecker();

                $rootScope.$on("checkMenu", menuChecker);

【讨论】：