MDL 添加点击 'mdl-navigation__link' 时的涟漪效果

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>

当 <a> 元素被点击时，我想用强调色在它上面添加波纹效果。然后我希望这个元素保持选中状态。我该怎么做？

Answer 1

编辑：请注意，根据 OP 的要求，已编辑此答案以反映他的需求。如果您是因为标题而来，请查看下面的其他答案。这个答案是在涟漪效应结束后保持 link 被选中。（请参阅他要求的评论）

您可以通过在标签上设置 class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect mdl-button--icon" 轻松添加涟漪效果。然而，由于 <a> 标签不是用来做这个的，我们添加一些 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');
});

当您单击任何按钮时，此代码将删除每个按钮的 class 'selected'（或任何您想要的），然后再将其添加到您仅单击的按钮。然后我们设置所选 class 的样式以保持涟漪效果。

.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
}

你可以在这个 Fiddle 中尝试：Demo

Answer 2

只需使用 classes class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect"

并添加 css:

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

就可以了，不需要所有其他 classes 和 javascript。

MDL 添加点击 'mdl-navigation__link' 时的涟漪效果

MDL add ripple effect when clicking 'mdl-navigation__link'

css

material-design

material-design-lite