master

分支 (1)

管理

管理

master

big-front-end
/
jq版展开折叠面板.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <title></title>
    <style type="text/css">
      body {
        margin: 0;
      }

      .main {
        padding: 40px;
        box-sizing: border-box;
      }

      .article {
        line-height: 70px;
      }

      .articleBx {
        position: relative;
      }

      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .lookAll {
        position: absolute;
        bottom: 0px;
        right: 0px;
        /* 此处高度需要和article的行高一致 */
        height: 70px;
        line-height: 70px;
        background-color: #FFFFFF;
        padding-left: 10px;

      }

      .allTxt {
        color: #108EE9;
        font-size: 30px;
        letter-spacing: 2px;
      }

      .ellfh {
        letter-spacing: 2px;
        font-size: 30px;
      }

      .hidArticle {
        text-align: center;
        color: #108EE9;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="articleBx">
        <div class="article ellipsis">玉米含有大量的膳食纤维，玉米是粗粮中营养最为丰富的一种，玉米能消除人的饥饿感，而且玉米的热量比较低，所以吃玉米可以起到减肥的作用。玉米种含有多种维生素和矿物质，能补充人体所需的营养物质，既能抗衰老还能起到防治癌症的作用，现在越来越多的人将牛奶和玉米搭配食用，可以用牛奶来煮玉米，将玉米切成块放入锅中，倒入适量的牛奶和水，为了让玉米有甜味，可以加入一些儿炼乳，煮开后用小火煮二十分钟即可，煮好后先不要吃，浸泡一会儿再吃。这样煮出来的玉米很好吃哦，味道好而且营养也高。还有人将煮熟的玉米粒放入搅拌机中，倒入适量牛奶搅拌后做成玉米奶，健康又美味，大家可以尝试一下</div>
        <div class="lookAll">
          <text class='ellfh'>...</text> <text class='allTxt'>全文</text>
        </div>
      </div>
      <div class=" hidArticle">收 起</div>
    </div>
  </body>
  <script type="text/javascript" charset="utf-8">
    $(function() {
      $('.hidArticle').hide();
      $('.lookAll').click(function() {
        $('.article').removeClass("ellipsis");
        $('.lookAll').hide();
        $('.hidArticle').show();
      })

      $('.hidArticle').click(function() {
        $('.article').addClass("ellipsis");
        $('.lookAll').show();
        $('.hidArticle').hide();
      })
    })
  </script>
</html>