【问题标题】: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');
    
        });
    
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-05-12
      • 1970-01-01
      • 1970-01-01
      • 2020-08-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多