Question

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

Answer 1

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

由于我们希望为高度设置动画以适应动态内容，因此我们会使用max-height而不是height来使动画生效。

＆＃13;

$(".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);
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

调整MDL卡高度大小点击支持卡文本的高度

1 个答案: