Question

我有一个li菜单，300px转到display:none，而mobile_nav按钮会亮起。

现在我的控制器中已经使用了这个

main.js

$scope.mobileMenu = function() {
  var menu = document.getElementById('main_nav');

  if (menu.style.display == 'block') {
      menu.style.display = 'none';
  } else {
      menu.style.display = 'block';
  }
};

如果我打开移动菜单，然后关闭它，则在调整大小时它会在更大的视图上保持关闭状态，即使我在CSS中有display:block。如果在其中单击某个项目，还需要关闭移动菜单。

试过这个，但没有运气

的index.html

<div
  ng-click="isMobileNavOpen = !isMobileNavOpen"
  class="mobile_nav">
  =
</div>

<nav id="main_nav" ng-init="isMobileNavOpen = true" ng-show="isMobileNavOpen">
  <ul>
    <li><a ui-sref="home">Home</a></li>
    <li><a ui-sref="about">About</a></li>
  </ul>
</nav>

的style.css

// the button
.mobile_nav {
  display: none;
}

@media all and (max-width: 300px) {
  .mobile_nav {
    display: block;
  }      

  #main_nav {
    display: none;
  }

  #main_nav li {
    float: none;
    margin-bottom 20px;
  }

  #main_nav a {
    width: 100%;
  }
}

Answer 1

找到了完美的图书馆！

https://github.com/AnalogJ/matchmedia-ng

^这是修复我的问题的代码（需要Angular方法来检测大小）

var unregister = matchmedia.onPhone( function(mediaQueryList){
    $scope.isPhone = mediaQueryList.matches;
});

必须使用覆盖来调整我的像素规格：

angular.module('myapp', ['matchmedia-ng']).config(['matchmediaProvider', function (matchmediaProvider) {
    matchmediaProvider.rules.phone = "(max-width: 500px)";
    matchmediaProvider.rules.desktop = "(max-width: 1500px)";
}]);

还必须继续使用2种不同的导航：/仍然会尝试使用这一点，看看我是否可以使用1导航：

<div class="mobile_nav noselect">
    <div ng-click="isMobileNavOpen = !isMobileNavOpen" class="icon-menu"></div>
</div>

<nav id="main_nav">

<nav id="mobile_nav" ng-show="isMobileNavOpen">

如何使用ng-show＆amp; amp; NG-点击？

1 个答案: