更改materializeCSS卡的溢出 - 在单击卡中包含的元素时显示

Question

我想在卡片标题中有一个下拉按钮，点击后会显示如下选项的下拉列表：

https://wordpress.org/plugins/quick-pagepost-redirect-plugin/

我知道这可以通过将卡的溢出设置为overflow: visible !important来完成。 但这会导致点击时卡片显示的动画效果不佳。您可以在此处查看动画：

我希望卡片揭示的显示动画通常像这样动画：https://jsfiddle.net/506ubrxh/2/

所以我希望在点击列表图标时动态更改卡片的溢出属性，以便在用户点击列表按钮并更改回{{overflow: visible !important时更改为overflow: hidden 1}}当用户关闭下拉列表时。我编写了jQuery来执行此操作，但代码似乎不起作用。下面是我的html，css和jquery代码。

HTML代码：

<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="http://materializecss.com/images/office.jpg">
  </div>
  <div class="card-content">
    <span class="card-title activator grey-text text-darken-4">Card Title</span>
    <i class="material-icons right dropdown-button" data-activates="dropdown1">list</i>
  </div>
  <div class="card-reveal">
    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right listExpand">close</i></span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
</div>

css代码：

.card {
  width: 60%;
  overflow: visible !important;
}

jQuery代码：

$(document).ready(function(){
  $('.listExpand').click(function(){
    if($(this).hasClass('active'))
      $('.card').css("overflow", "visible !important");
  });
});

JSFiddle链接： https://jsfiddle.net/su23or05/

如果有人可以提供帮助，那真是太棒了！

Answer 1

虽然Twitter Bootstrap和Zurb Foundation等CSS框架为其组件提供了API，但遗憾的是，MaterialiseCSS框架主要缺少公共API来为组件设置自定义事件处理程序，尤其是对于下拉列表。

因此，我们必须手动设置处理程序，直到它们提供API - Example Here ：

.card--visible-overflow {
  overflow: visible !important;
}

$(document)
  // remove the visibility class from all cards
  // if the target of the click event is not a dropdown button
  .on('click', function(e) {
    if (! $(e.target).hasClass('dropdown-button')) {
      $('.card').removeClass('card--visible-overflow');
    }
  })

  // add the visibility class to the closest card
  // by clicking on each dropdown button inside the card
  .on('click', '.card .dropdown-button', function() {
    var $card = $(this).closest('.card'),
        openedClass = 'card--visible-overflow',
        dropDownIsOpened = $card.hasClass(openedClass);

    if (! dropDownIsOpened) {
      $card.addClass(openedClass); 
    }
  });