javascript - 更改 materializeCSS card-reveal 的 overflow on clicking an element contained in card

Question

我想在卡片标题中有一个下拉按钮，点击它应该会显示一个下拉选项，如下所示:

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

我希望卡片展示的展示动画像这样正常动画:https://jsfiddle.net/su23or05/

所以我想在单击列表图标时动态更改卡片的溢出属性，以便在用户单击列表时更改为overflow: visible !important按钮并在用户关闭下拉菜单时恢复为 overflow: hidden。我已经编写了 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/506ubrxh/2/

如果有人能提供帮助就太好了!

Answer 1

虽然 Twitter Bootstrap 和 Zurb Foundation 等 CSS 框架为其组件提供 API，但不幸的是，MaterializeCSS 框架大多缺乏公共(public) 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); 
    }
  });