Question

好吧，Angular 4，Angular Material 2，Node 8（尽管6.x存在问题）。使用带锚标记的md-sidenav作为内容。 CSS没有点击它们并点击没有做任何事情。检查开放标签，尝试将模式切换为结束，推送和＆amp;问题仍然存在。 MdSidevnavModule在我的app模块中导入，否则按预期工作。尝试将锚标签更改为按钮 - 同样的问题。如果我遗漏了一些愚蠢或缺少诊断所需的信息，我会提前道歉。提前致谢。

<md-sidenav-container class="container mat-elevation-z12" 
color="primary">

<md-sidenav #sidenav mode="push" class="sidenav">
<div class="contact-container">
  <a href="#"><h1 id="call-to-action">Contact</h1></a>
  <a href="https://www.google.com">
    <i class="fa fa-linkedin-square fa-5x social-icon" id="linkedin" 
aria-hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-github-square fa-5x social-icon" id="github" aria-
hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-facebook-official fa-5x social-icon" id="facebook" 
aria-hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-twitter-square fa-5x social-icon" id="twitter" 
aria-hidden="true"></i>
  </a>
</div>
</md-sidenav>

<div class="sidenav-content">
  <h1 class="banner">Hey</h1>   
</div>

</md-sidenav-container>

Answer 1

不，它不会阻止它工作。问题可能是错误的font awesome图标。

我的示例代码

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
    <a href="https://www.google.com">
       <i class="fa fa-facebook" id="twitter" aria-hidden="true"></i>
    </a>
    <a href="https://www.google.com">
      <i class="fa fa-google" id="twitter" aria-hidden="true"></i>
    </a>
  </md-sidenav>
</md-sidenav-container>

注意：使用此post获取font-awesome

LIVE DEMO 说明了锚标记在md-side-nav

中的作用

Answer 2

道歉 - 问题解决了。我知道这将是愚蠢的 facepalm

我的sidenav上有一个z-index -1（我不记得为什么），这阻止了任何点击。啊。

md-sidenav阻止锚标签工作

2 个答案: