单击卡片中包含的元素时更改 materializeCSS card-reveal 的溢出

Question

我想在 card-title 中有一个下拉按钮，点击后应该会显示一个下拉选项，如下所示：

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

我希望 card-reveal 的 显示动画 像这样正常显示动画：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 link: 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); 
    }
  });

单击卡片中包含的元素时更改 materializeCSS card-reveal 的溢出

change overflow of materializeCSS card-reveal on clicking an element contained within the card

html

javascript

css

jquery

materialize