关于 javascript:change overflow of materializeCSS card-reveal on click a element contains inside the card


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

我想在卡片标题内有一个下拉按钮，点击后应显示如下选项的下拉菜单：

image of card-reveal with list

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

我希望卡片显示的显示动画正常动画如下：https://jsfiddle.net/su23or05/

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

html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <img class="activator" src="http://materializecss.com/images/office.jpg">
 
 
    <span class="card-title activator grey-text text-darken-4">Card Title</span>
    <i class="material-icons right dropdown-button" data-activates="dropdown1">list
 
 
    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right listExpand">close</span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
 
  <ul id='dropdown1' class='dropdown-content'>
   
<li>
one
</li>

   
<li>
two
</li>

    <li class="divider">
</li>

   
<li>
three
</li>

 
</ul>

css代码：

1
2
3
4
.card {
  width: 60%;
  overflow: visible !important;
}

jQuery 代码：

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

JSFiddle 链接：https://jsfiddle.net/506ubrxh/2/

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

相关讨论

虽然像 Twitter Bootstrap 和 Zurb Foundation 这样的 CSS 框架为其组件提供 API，但遗憾的是，MaterializeCSS 框架大多缺乏公共 API 来为组件设置自定义事件处理程序，尤其是下拉菜单。

因此我们必须手动设置处理程序，直到它们提供 API – 示例如下：

1
2
3
.card--visible-overflow {
  overflow: visible !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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);
    }
  });
相关讨论