Javascript 单击卡中包含的元素时更改ECSS卡显示的溢出

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

我知道这可以通过将卡的溢出设置为

overflow:visible！重要信息

但这会导致单击时卡片显示的动画不好。您可以在此处检查动画：

我希望卡片显示的显示动画正常设置如下动画：

因此，我想在单击列表图标时动态更改卡的溢出属性，使其更改为

溢出：可见！重要信息

当用户单击列表按钮，并在用户关闭下拉列表时返回到

溢出：隐藏

。我编写了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>

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

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

jQuery代码：

<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>

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

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

jsiddle链接：

---

如果有人能帮忙，那就太棒了

>P>虽然推特Bootstrap和ZURB基金会等CSS框架为组件提供了API，但不幸的是，OrthalIsIsCSS框架大多缺乏公共API来设置自定义事件处理程序到组件，尤其是对于DoPrdSo.< 因此，我们必须手动设置处理程序，直到它们提供API为止

.card--可见溢出{
溢出：可见！重要；
}

$（文档）
//从所有卡中删除可见性类
//如果单击事件的目标不是下拉按钮
.on（'click'，函数（e）{
if（！$（e.target）.hasClass（'dropdown-button'））{
$（'.card'）.removeClass（'card--visible overflow'）；
}
})
//将可见性类添加到最近的卡
//单击卡内的每个下拉按钮
.on（'click'，'card.dropdown button'，function（）{
var$card=$（this）.closest（'.card'），
openedClass='卡片--可见溢出'，
DropDownIsPend=$card.hasClass（openedClass）；
如果（！dropDownIsOpened）{
$card.addClass（openedClass）；
}
});

您提供的小提琴有什么问题？它看起来与您提供的图像一模一样，而且似乎运行良好。我能看到的唯一一个小问题是，

one

和

two

项目之间没有关键线。问题是卡片显示的动画，当点击卡片显示其内容时，整个向上滑动的块是可见的，看起来不太好。我想要卡片展示的正常动画。检查这里：太棒了！谢谢，这很有魅力，可惜这么漂亮的框架没有API。还有一件事@Hashem Qolami，如果我有多张相同类型的卡片并排使用

display:inline block

，每当我点击该卡片的列表按钮，我关注的卡片或其他卡片（取决于浏览器宽度）向下滑动一点，但是如果我没有将卡片并排放置，那么这些卡片将保持在正确的位置。为什么？下面是查看此问题的链接：@hulkinBrain伟大的问题！TL:DR:添加到

。卡片
s将解决此问题。详细回答：内联级元素，包括
内联块
s被放置在它们的页面上默认情况下与其父元素的基线对齐的行。将
溢出
设置为
可见
以外的值会更改内联级别元素的基线，在这种情况下，基线将是元素的底边距边缘…@hulkinBrain用文字解释这一点有点困难：）因此，我最终得到了这张图片：（对于
内联块
s）希望它有意义。再一次，Qolani，精彩的解释！我完全明白发生了什么！（我知道感谢的帖子是不可取的，但我必须写这篇文章）。谢谢你的帮助，谢谢你在我的问题上花费的时间！那张照片把它说得非常清楚D再次感谢！