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'); 

    }); 

});