javascript - 使用 Angular.js 和 CSS 获取一些与 UI 相关的问题

Question

我有一个问题。我的页面中有一个导航栏。当我访问每个菜单时，导航栏都在晃动。让我在下面解释我的代码。

  <ul class="nav navbar-nav">
    <li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
    <li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li> 
    <li  ng-class="{'active open': $state.includes('dashboard.res')}">
    <a ui-sref="dashboard.res.userrole">Resource Management</a>

    </li>
    <li ng-class="{'active open': $state.includes('dashboard.deptmanagement')}"><a ui-sref="dashboard.deptmanagement.stream" >Department Management</a></li>
    <li ng-class="{'active open': $state.includes('dashboard.user')}"><a ui-sref="dashboard.user.usermanagement">User Management</a></li>
    <li ng-class="{'active open': $state.includes('dashboard.plan')}"><a ui-sref="dashboard.plan.timetable">Plan Management</a></li>
    </ul>
<div class="row" style="padding-top:120px;"  ui-view>
</div>

这里我上面的每个菜单都包含一些表单和 CRUD 操作。当用户点击每个菜单时，这个栏会左右摇晃。我需要当用户点击任何菜单时，它应该像那样发生意味着菜单栏将保持不变。请帮我解决这个问题。

Answer 1

我的建议是根据您的说法“当用户点击每个菜单时，此栏会左右摇晃。”

you need move your <ul> navbar code to, out of <ui-view>.

例子

<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
<li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li> 
<li ng-class="{'active open': $state.includes('dashboard.res')}"><a ui-sref="dashboard.res.userrole">Resource Management</a></li>
<li ng-class="{'active open': $state.includes('dashboard.deptmanagement')}"><a ui-sref="dashboard.deptmanagement.stream" >Department Management</a></li>
<li ng-class="{'active open': $state.includes('dashboard.user')}"><a ui-sref="dashboard.user.usermanagement">User Management</a></li>
<li ng-class="{'active open': $state.includes('dashboard.plan')}"><a ui-sref="dashboard.plan.timetable">Plan Management</a></li>
</ul>

<div ui-view></div>