仅在移动设备上折叠 div - Bootstrap AngularJS

Question

我有这段代码，我想让它在移动设备上崩溃，但它不起作用。我尝试了如代码所示的 visible-xs 和 hidden-xs ，但它显然不起作用。

我可以做些什么来实现这一点？ 我想仅在桌面中显示<ul>...</ul>，并使其在移动视图中可折叠，并仅显示单击后会打开的按钮。

<div>
    <button class="visible-xs" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
    <ul class="hidden-xs in nav nav-pills nav-stacked uib-collapse="isCollapsed">
        <li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
        <li><a ng-click="gotoElement('applied')">Applied</a></li>
        <li><a ng-click="gotoElement('connections')">Connections</a></li>
    </ul>
</div>

Answer 1

如果你想在模板上使用这个逻辑，你需要使用 ng-init 来初始化 isCollapsed 属性的值，但是如果你在角度控制器中初始化所有数据会更好。此外，要在桌面上显示 ul 并将其隐藏在移动设备中，您需要进行移动检测。例如在 express 上，您可以使用：https://www.npmjs.com/package/express-device 并使用变量 isMobile 来初始化折叠属性

<div>
    isCollapsed : {{isCollapsed}}
    <button class="visible-xs" ng-init="isCollapsed = isMobile" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
    <ul class="nav nav-pills nav-stacked" uib-collapse="isCollapsed">
        <li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
        <li><a ng-click="gotoElement('applied')">Applied</a></li>
        <li><a ng-click="gotoElement('connections')">Connections</a></li>
    </ul>
</div>