Materialize.css - Comment désactiver l'effet d'ondulation/l'effet des vagues sur un élément spécifié (balise d'ancrage)?

Question

J'essaye de supprimer l'effet d'ondulation/l'effet d'onde seulement à partir d'une étiquette d'ancre spécifiée mais incapable de l'atteindre. Des idées?

balise d'ancrage:

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

La classe "vagues-effet des ondes de lumière" obtient ajouté dynamiquement comme ceci:

<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

Vous pouvez utiliser .addClass() et .removceClass() méthode de jQuery pour ajouter ou supprimer classe à partir d'éléments.

Dans votre cas, vous voulez ajouter Ripple Effect à une balise d'ancrage. Donc, affectez un identifiant à cette balise d'ancrage et utilisez la méthode .addClass() pour ajouter ou .removeClass() pour supprimer l'effet d'ondulation .

Ainsi, vous pouvez déclencher un événement comme button click, page load pour ajouter/supprimer votre classe (waves-effect waves-light)

J'ai créé un jsFiddle un coup d'oeil:

Démo:https://jsfiddle.net/Tirth_Patel/s52ko6eo/

Exemple:

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

    }); 

});