MDL 카드의 높이를 높이려면 클릭하십시오. 카드의 텍스트를 높이려면

HTML, CSS 및 Jquery를 처음 사용합니다.MDL 카드의 높이를 높이려면 클릭하십시오. 카드의 텍스트를 높이려면

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>

출처

2017-01-03 Connor

대신 .article_card 전체의 높이를 변경하는 상기 .mdl-card__supporting-text 요소의 높이를 애니메이션. 이로 인해 .article_card 전체가 높이가 확장되어 .mdl-card__supporting-text의 내용을 표시합니다.

동적 콘텐츠에 맞게 애니메이션을 적용하려면 height 대신 max-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>

출처

2017-01-17 21:48:27

MDL 카드의 높이를 높이려면 클릭하십시오. 카드의 텍스트를 높이려면

답변

관련 문제