单击时将 MDL 卡高度调整为卡支持文本的高度

我是HTML，CSS和Jquery的新手。

我为 Material Design Lite （MDL） "卡片"创建了以下代码。

问题：卡片当前将调整大小，但只有标题上方的空间，我需要扩展支持文本部分。我还需要支持文本部分动态扩展，仅足够远以在页面上显示其所有文本。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">     </script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
    .article_card {
        width: 95%;
        height: 200px;
        background-color: white;
        text-align: left;
        scroll-behavior: smooth
    }
    .mdl-grid {
        text-align: center;
        justify-content: center;
    }
    .mdl-card__supporting-text {
        height: 70px;
        padding-left: 20px;
    }
    .mdl-button {
        background-color: whitesmoke;
        color: black;
    }
    span+span {
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
</head>
<body>
<div class="mdl-grid">
    <span></span>
    <span class="article_card mdl-card mdl-shadow--8dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">The Article Title</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    This is some of the article1.<br />
                    This is some of the article2.<br />
                    This is some of the article3.<br />
                    This is some of the article4.<br />
                    This is some of the article5.<br />
                    This is some of the article6.<br />
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
                    Read the rest
                    </a>
                </div>
            </span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(".article_card").click(function() {
        var newHeight = 900
        if ($(".article_card").height() != 200)
            $(".article_card").animate({
                height: 400
            }, 500);
        else
            $(".article_card").animate({
                height: newHeight
            }, 500);
    });
</script>
</body>
</html>

不是改变整个.article_card的高度，而是对.mdl-card__supporting-text元素的高度进行动画处理。这将导致整个.article_card的高度展开以显示.mdl-card__supporting-text的内容。

由于我们希望对高度进行动画处理以适应动态内容，因此我们将使用 max-height 而不是 height 以使动画正常工作。

$(".article_card").click(function() {
  if ($(this).height() > 220 ) {
    $(this).children('.mdl-card__supporting-text').animate({
      maxHeight: '75px'
     }, 500);
  } else {
    $(this).children('.mdl-card__supporting-text').animate({
      maxHeight: '1000px'
    }, 500);
  }
});

.article_card {
  width: 95%;
  background-color: white;
  text-align: left;
  scroll-behavior: smooth;
  padding-top: 0px;
  position: relative;
}
.mdl-grid {
  text-align: center;
  justify-content: center;
}
.mdl-card__supporting-text {
  max-height: 75px;
  padding-left: 20px;
}
.mdl-button {
  background-color: whitesmoke;
  color: black;
}
span+span {
  margin-bottom: 10px;
  margin-top: 10px;
}

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="mdl-grid">
  <span></span>
  <span class="article_card mdl-card mdl-shadow--8dp">
    <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">The Article Title</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    This is some of the article1.<br />
                    This is some of the article2.<br />
                    This is some of the article3.<br />
                    This is some of the article4.<br />
                    This is some of the article5.<br />
                    This is some of the article6.<br />
                    This is some of the article1.<br />
                    This is some of the article2.<br />
                    This is some of the article3.<br />
                    This is some of the article4.<br />
                    This is some of the article5.<br />
                    This is some of the article6.<br />
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
                    Read the rest
                    </a>
                </div>
            </span>
</div>

相关内容

最新更新

热门标签：