Question

我有一个项目列表（水平显示）和一个下拉列表。我试图了解如何在窗口调整大小时将项目从水平列表移动到下拉列表。基本上我只有一排我可以适合我的物品。如果它不适合（添加列表项宽度），我想将它们放在下拉列表中。我使用的是angularjs。

＆＃13;

<div class="name-list">
  <ul class="horizontal">
    <li><a href="#">item 1</a>
    </li>
    <li><a href="#">item 2</a>
    </li>
    <li><a href="#">item 3</a>
    </li>
  </ul>
</div>

<div class="dropdown more-names">
  <button>More</button>
  <ul class="dropdown">
    <li><a href="#">item 4</a>
    </li>
    <li><a href="#">item 5</a>
    </li>
    <li><a href="#">item 6</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

只需在控制器中设置$ watch：

$scope.$watch(function() {
    return $window.innerWidth;
}, function(value) {
    console.log('window inner width is now', value);
    yourFunctionToMoveListItem();
});

您应该使用$window服务，而不是javascript window，因为它更安全一些......引用文档：

虽然窗口在JavaScript中是全局可用的，但它会导致可测性问题，因为它是一个全局变量。在角度我们总是通过$ window服务引用它，所以它可能是被覆盖，删除或嘲笑以进行测试。

Answer 2

当窗口调整大小时，您需要使用css媒体查询来显示/隐藏html元素。例如像这样

@media screen and (max-width: 300px) {
    .myClass {
        width: 100px;
    }
}

因为在代码段中你无法更改demo的页面大小并看到结果，所以我在 jsfiddle 中创建了我的示例。

javascript移动列表项在窗口调整大小

2 个答案: