Angular 2 Responsive Header - 展开/切换按钮在移动视图中不起作用 [英] Angular 2 Responsive Header - Expand/toggle button not working in mobile view

问题描述

切换按钮出现在移动视图中，但不可点击。在角度 appDropdown 用于定义一个下拉按钮。有没有类似的方法来修复切换按钮？

很遗憾，我无法在这里显示图片，但管理下拉按钮存在另一个问题。当我将鼠标悬停在内部< li> （例如注册...）上时，它会将颜色更改为灰色。

添加 href =＃可以消除不需要的颜色变化，但是当点击它时刷新整个页面。

以下是HTML：

 < nav class =navbar navbar -webmaster> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonappDropdown class =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbar> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brand[routerLink] =['/']>标题< / a> 
< / div> 
 
< div class =collapse navbar-collapseid =navbar> 
< ul class =nav navbar-nav navbar-right> 
< li class =active>< a href =＃> Sublime< span class =sr-only>< / span>< / a>< / li> ; 
< li class =dropdownappDropdown * ngIf =userService.isAdmin> 
< a class =dropdown-togglerole =buttonaria-haspopup =truearia-expanded =false>管理< span class =caret>< / span> ;< / A> 
< ul class =dropdown-menu> 
< li>< a [routerLink] =['/ register']>注册< / a>< / li> 
< li>< a>其他管理员资料< / a>< / li> 
< li role =separatorclass =divider>< / li> 
< li>< a>另一个管理员资料< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< form class =navbar-form navbar-right search-formrole =search> 
< input type =textclass =form-controlplaceholder =Search/> 
< / form> 
< / div> 
 
< / div> 
  

CSS：

  nav.navbar-webmaster {
 background：＃00547E; 
} 
 
 nav.navbar-webmaster a {
 color：#fff; 
} 
 
 nav.navbar-brand：hover {
 color：＃337ab7; 
} 
 
 nav.navbar-webmaster ul.navbar-nav a：hover，
 nav.navbar-webmaster ul.navbar-nav a：visited，
 nav .navbar-webmaster ul.navbar-nav a：focus，
 nav.navbar-webmaster ul.navbar-nav a：active {
 background：＃0d3a51; 
} 
 
 nav.navbar-webmaster ul.navbar-nav a：hover {
 border-color：＃337ab7; 
} 
 
 nav.navbar-webmaster li.divider {
 background：#ccc; 
} 
 
 nav.navbar-webmaster button.navbar-toggle {
 background：＃999; 
 border-radius：2px; 
} 
 
 nav.navbar-webmaster button.navbar-toggle：hover {
 background：＃999; 
} 
 
 nav.navbar-webmaster button.navbar-toggle> span.icon-bar {
 background：#fff; 
} 
 
 nav.navbar-webmaster ul.dropdown-menu {
 border：0; 
背景：#fff; 
} 
 
 nav.navbar-webmaster ul.dropdown-menu> li> a {
 color：＃444; 
} 
 
 nav.navbar-webmaster ul.dropdown-menu> li> a：hover {
 background：＃00547E; 
颜色：#fff; 
} 
  

<

解决方案

使用ng-bootstrap实现。更新HTML如下

 < nav class =navbar navbar-inverse> 
< div class =container-fluid> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle（click）=isCollapsed =！isCollapsed[attr.aria-expanded] =！isCollapsedaria-controls =myNavbar> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃>徽标< / a> 
< / div> 
< div class =collapse navbar-collapseid =myNavbar[ngbCollapse] =isCollapsed> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>关于< / a>< / li> 
< li>< a href =＃>项目< / a>< / li> 
< li>< a href =＃>联络人< / a>< / li> 
< / ul> 
< ul class =nav navbar-nav navbar-right> 
< li>< a href =＃>< span class =glyphicon glyphicon-log-in>< / span>登录< / A>< /锂> 
< / ul> 
< / div> 
< / div> 
< / nav> 
  

声明组件类中的变量

  public isCollapsed = false; 
  

如需实时行动，请访问我的 Plunker

The toggle button appears in mobile view but it's not clickable. In angular appDropdown is used to define a drop down button. Is there a similar approach to fix the toggle button?

Unfortunately I cannot show images here but there's another problem with "Administration" drop down button. It changes colour to grey when I hover over the internal <li> (such as "Registration"...).

Adding href= "#" removes the unwanted color change but this refreshes the whole page when its clicked.

Here's the HTML:

<nav class="navbar navbar-webmaster">
<div class="container">
    <div class="navbar-header">
        <button type="button" appDropdown class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" [routerLink]="['/']">Title</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Sublime<span class="sr-only"></span></a></li>
          <li class="dropdown" appDropdown *ngIf="userService.isAdmin">
      <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a [routerLink]="['/register']">Registration</a></li>
        <li><a>Other Admin  Stuff</a></li>
        <li role="separator" class="divider"></li>
        <li><a>Another Admin Stuff</a></li>
      </ul>
    </li>
        </ul>
        <form class="navbar-form navbar-right search-form" role="search">
            <input type="text" class="form-control" placeholder="Search" />
        </form>
    </div>

</div>

The CSS:

nav.navbar-webmaster {
  background: #00547E;
}

nav.navbar-webmaster a {
  color: #fff;
}

nav.navbar-brand :hover {
  color: #337ab7;
}

nav.navbar-webmaster ul.navbar-nav a:hover,
nav.navbar-webmaster ul.navbar-nav a:visited,
nav.navbar-webmaster ul.navbar-nav a:focus,
nav.navbar-webmaster ul.navbar-nav a:active {
  background: #0d3a51;
}

nav.navbar-webmaster ul.navbar-nav a:hover {
  border-color: #337ab7;
}

nav.navbar-webmaster li.divider {
  background: #ccc;
}

nav.navbar-webmaster button.navbar-toggle {
  background: #999;
  border-radius: 2px;
}

nav.navbar-webmaster button.navbar-toggle:hover {
  background: #999;
}

nav.navbar-webmaster button.navbar-toggle>span.icon-bar {
  background: #fff;
}

nav.navbar-webmaster ul.dropdown-menu {
  border: 0;
  background: #fff;
}

nav.navbar-webmaster ul.dropdown-menu>li>a {
  color: #444;
}

nav.navbar-webmaster ul.dropdown-menu>li>a:hover {
  background: #00547E;
  color: #fff;
}

Any help is greatly appreciated.

解决方案

Implemented by using ng-bootstrap. Update html as below

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar" [ngbCollapse]="isCollapsed">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Declare below variable in component class

public isCollapsed = false;

For live action, visit my Plunker

这篇关于Angular 2 Responsive Header - 展开/切换按钮在移动视图中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！