当点击'mdl-navigation__link'时，MDL如何添加涟漪效果？

Question

我有以下导航：

<nav class="mdl-navigation mdl-js-ripple-effect">
  <a id="submenu" class="mdl-navigation__link" href="#">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
</nav>

当单击元素时，我希望在它上面添加带有强调颜色的涟漪效果。然后我想让这个元素保持选中状态。我该怎么做？

- Sergino

Answer 1

编辑：请注意，根据提问者的要求，已经对此答案进行了编辑以反映他的需求。如果您是因为标题而来，请查看下面的其他答案。此答案是为了在涟漪效果完成后保持所选链接。(请参见他的评论)

---

您可以通过将class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect mdl-button--icon"设置在标签上来轻松添加涟漪效果。然而，由于标签并不是为此而设计的，我们需要添加一些CSS使其正常工作：

a.mdl-js-ripple-effect {
  display: inline-block;//Important, without that the button won't appear correctly
  position: relative; //without it, ripple will be shifted

  width: 50px; //Same as height, for a perfect circle
  height: 50px; // Works with % values too
  line-height: 50px; //same as button height, to center the text vertically
  text-align: center; //Center horizontally 
}

如果您不希望最后点击的元素消失水波纹效果，您可以使用一些 jQuery 来实现：

$('a.mdl-js-ripple-effect').click(function() {
$('a.mdl-js-ripple-effect').removeClass('selected');
$(this).addClass('selected');
});

当您点击任何按钮时，这段代码将移除每个按钮的“selected”类（或其他您想要的类），然后再将其仅添加到您点击的按钮上。 然后，我们为选定的类设置样式以保持涟漪效果。

.selected .mdl-ripple {//.selected is the class we used in javascript
  width: 0; //necessary, or it will be shifted
  opacity: 0.3; //To keep the ripple effect visible
}

You can try it in this Fiddle : Demo

- Amine I.

---

如何使只有一个项目被选中？ - Sergino

@sreginogemoh，我更新了我的fiddle和答案，使用JQuery实现了这一点。你实际上没有指定你是否想要一个仅限CSS的答案，而且大多数MDL都使用JS，所以我假设这是可以的。来看看吧！ - Amine I.

Answer 2

只需使用以下类名：class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect"

并添加以下CSS：

a.mdl-js-ripple-effect { position: relative; }

只要使用这个技巧就可以了，不需要其他类和JavaScript。

- Fortes

---

嗨！差不多一年后，我才注意到你回答了他的问题 - 的确，你回答了“MDL在点击'mdl-navigation__link'时添加涟漪效果”的问题，这就是每个人都会寻找的答案。但是OP进一步要求涟漪效果在链接被点击后应该保持“活动状态”，这就是为什么我编辑了我的答案，并且你的答案并没有完全反映他的需求，也没有被“接受”。然而，根据问题标题，你的答案是正确的，所以你会得到我的赞同 :)。 - Amine I.