單擊時將MDL卡的高度調整為卡支持文本的高度

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來使動畫起作用。

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

單擊時將MDL卡的高度調整為卡支持文本的高度

問題描述

1 個解決方案

解決方案1
0 2017-01-17 21:48:27

單擊時將MDL卡的高度調整為卡支持文本的高度

問題描述

1 個解決方案

解決方案1 0 2017-01-17 21:48:27

解決方案1
0 2017-01-17 21:48:27