Question

我在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;
  }
}

然而，价值＆＃39;＃links＆＃39;当top且窗口宽度小于1024时，$scope.loginStatus == true裁定不会从140px更改为240px.loginStatus设置为true为什么不{q} menuChecker检查loginStatus？

请注意，我还使用了bootstrap，因此我不知道这是否可能是问题的一部分。

Answer 1

menuChecker只在document.ready中声明，并且从未被调用过。这已经得到了补救。

$(document).ready(function(){

                menuChecker();

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

@media Query是否覆盖了我的jQuery的裁决？

1 个答案: