Materialize.css - 如何在指定元素（锚标签）上禁用波纹效果/波浪效果？答案

【问题标题】：Materialize.css - How to disable ripple effect/ waves effect on a specified element (anchor tag)?Materialize.css - 如何在指定元素（锚标签）上禁用波纹效果/波浪效果？
【发布时间】：2017-10-20 05:04:31
【问题描述】：

我正在尝试仅从指定的锚标记中删除波纹效果/波浪效果，但无法实现。有什么想法吗？

锚标记：

    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span>My Policies</span>
       <i class="fa fa-angle-down" aria-hidden="true"></i><i class="fa fa-plus"></i>
    </a>

“waves-effect waves-light”类是这样动态添加的：

<a class="nav-link dropdown-toggle waves-effect waves-light" href="#" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  <span>My Policies</span>
  <i class="fa fa-angle-down" aria-hidden="true"></i><i class="fa fa-plus"></i>
</a>

【问题讨论】：

标签： twitter-bootstrap materialize

【解决方案1】：

您可以使用jQuery 的.addClass() 和.removeClass() 方法在元素中添加或删除类。

在您的情况下，您想将 Ripple Effect 添加到锚标记。因此，为该锚标记分配一个 id 并使用.addClass() 方法添加或使用.removeClass() 删除涟漪效应。

所以你可以触发像button click, page load 这样的事件来添加/删除你的类（waves-effect waves-light）

我已经创建了一个 jsfiddle 看看：

演示： https://jsfiddle.net/Tirth_Patel/s52ko6eo/

示例：

HTML

<a class="blue nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span>My Policies</span>

    <i class="fa fa-angle-down" aria-hidden="true"></i>
    <i class="fa fa-plus"></i>

</a>

<br><button id="btn" class="btn">Add Ripple</button>

<br><br><button id="btn2" class="btn">Remove Ripple</button>

jQuery

$(document).ready(function(){

    // Adds `waves-effect wave-light` class to `anchor`
    $('#btn').click(function(){

        $('#navbarDropdownMenuLink3').addClass('waves-effect waves-light');
    });


    // Removes `waves-effect wave-light` class from `anchor`
    $('#btn2').click(function(){

        $('#navbarDropdownMenuLink3').removeClass('waves-effect waves-light');

    });

});

【讨论】：