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

Question

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

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

<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 属性的值，但如果在 Angular Controller 中初始化所有数据会更好。此外，要在桌面上显示 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>