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

Question

我试图从指定的锚标记中去除涟漪效应/波浪效果，但无法实现它。有任何想法吗？

锚标签：

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

类“波浪效应波光”被动态地添加这样的：

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

Answer 1

您可以使用.addClass()和jQuery.removceClass()方法来添加或删除从元素类。

在你的情况下，你想添加纹波效应到锚标签。因此，为该锚标记指定一个标识并使用.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'); 

    }); 

});