我是 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>关于javascript - 单击调整 MDL 卡片高度到卡片支持文本的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41434897/