suchen

Heim  >  Artikel  >  Web-Frontend  >  Die Funktion zum Anzeigen von Volltext basierend auf jQuery

Die Funktion zum Anzeigen von Volltext basierend auf jQuery

不言
不言Original
2018-07-02 15:48:591511Durchsuche

Dieser Artikel teilt die mit jQuery implementierte Volltextanzeigefunktion: Wenn der Textinhalt weniger als vier Zeilen umfasst, wird er nicht angezeigt. Der Volltext wird nur angezeigt und verfügt über diese Funktion, wenn er fünf Zeilen überschreitet ; es ist sehr praktisch, schauen wir uns unten an

Es gibt nicht viel zu sagen, bitte schauen Sie sich konkrete Beispiele an

Zitieren Sie die jQuery.js-Version selbst

Sehen Sie sich den vollständigen Text an ---Einklappen (der Textinhalt ist kürzer als vier Zeilen und wird nicht angezeigt. Vollständigen Text anzeigen-- -Einklappen, er wird angezeigt und hat diese Funktion erst nach mehr als fünf Zeilen) 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery1.7.2.min.js"></script>
    <title>查看更多---收起：细数逝去的过往</title>
    <style>
      .z_content_right_two {
        width: 978px;
        border: 1px solid #fff;
        padding: 10px;
        font-size: 14px;
        color: #666666;
        margin: 20px auto;
        text-indent: 30px;
        line-height: 22px;
        text-align: justify;
        background: #fff;
      }
      .ckgd {
        color: #00b1bb;
        text-decoration: none;
        display: inline-block;
        margin-left: -27px;
        text-decoration: underline;
      }
      .ckgd:hover {
        color: #00b1bb;
        text-decoration: none;
      }
      .shouqi {
        text-align: right;
        padding: 5px 20px;
      }
      .z_zixunhuifu {
        width: 8px;
        height: 8px;
        border: 1px solid red;
        background: red;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        margin-left: 122px;
        margin-top: -28px;
      }
      .z_xian {
        color: #ddd;
      }
    </style>
  </head>
  <body>
    <p class="z_content_right_two z_box_z">咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头</p>
    <p class="z_content_right_two z_box_z">咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头</p>
    <p class="z_content_right_two z_box_z">咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行 咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行咨询内容放这里，最多显示5行，超 过显示下查看箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行，超过显示下箭头咨询内容放这里，最多显示5行超 过显示下箭头</p>
  </body>
  <script>
    $(function() {
      var max = 330,
        display = "...显示全部";
      $(".z_content_right_two").on("click", ".ckgd", function() {
        var me = this,
          show = $(me).text() == display,
          attr = show ? "his" : "sub",
          name = show ? "收起" : display;
        $(this).parent().each(function() {
          $(this).html($(this).attr(attr)).append($(me).clone(true).text(name));
        });
      });
      $(".z_box_z").each(function() {
        var me = this,
          html = $(me).html(),
          text = getElementText(me),
          length = text.length,
          sub = text.substr(0, max);
        $(me).attr({
          his: text,
          sub: sub
        });
        if(length > max) {
          $(me).html(sub);
          $(me).append(
            $("<a href=&#39;javascript:void(0)&#39; class=&#39;ckgd&#39;>".concat(display, "</a>"))
          );
        }
      });
    });
    function getElementText(e) {
      var t = "";
      //如果传入的是元素，则继续遍历其子元素
      //否则假定它是一个数组
      e = e.childNodes || e;
      //遍历所有子节点
      for(var j = 0; j < e.length; j++) {
        //如果不是元素，追加其文本值
        //否则，递归遍历所有元素的子节点
        t += e[j].nodeType != 1 ? e[j].nodeValue : text(e[j].childNodes);
      }
      //返回区配的文本
      return t;
    }
  </script>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein. Weitere verwandte Inhalte finden Sie hier die chinesische PHP-Website!

Verwandte Empfehlungen:

Native Javascript-Kapselungsfunktionstest des Ein- und Ausblendeffekts

Wählen Sie eine bestimmte Registerkarte aus basierend auf Jquery easyui

Das obige ist der detaillierte Inhalt vonDie Funktion zum Anzeigen von Volltext basierend auf jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery easyui 封装 JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Test der nativen JavaScript-Kapselungsfunktion für Ein- und AusblendeffekteNächster Artikel：Test der nativen JavaScript-Kapselungsfunktion für Ein- und Ausblendeffekte

In Verbindung stehende Artikel

Mehr sehen