Question

我隐藏文本并使用jQuery添加“read more”链接。有一个问题，给中间文本一个h2标记。为了让它发挥作用我需要改变什么？

我使用代码技巧的代码。以下是原始代码段的链接： http://code-tricks.com/jquery-read-more-less-example/#demo

＆＃13;

$(document).ready(function() {
  var showChar = 100;
  var ellipsestext = "...";
  var moretext = "Show more >";
  var lesstext = "Show less";


  $('.more').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {

      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

＆＃13;

.morecontent span {
  display: none;
}
.morelink {
  display: block;
}
.productdescription {
  font-weight: 400;
}
.productdescription h2 {
  font-weight: normal;
  font-size: 13px;
  margin: 0px;
  padding-top: 24px;
}
.productdescription strong {
  padding-bottom: 24px;
  float: left;
  width: 100%;
}
.productdescription ul {
  list-style-type: square;
  padding: 24px 0px 0px 15px;
}
.morecontent span {
  display: none;
}
.morelink {
  display: block;
}
.morelink {
  color: #4285f4;
  display: inline-block;
}
.morelink:hover {
  text-decoration: underline;
}
.less {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span class="productdescription more">
<strong>Produktdetails</strong> 
  
Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. 
  
  
  
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</span>

＆＃13;

Answer 1

将该文本放入ID为

的标记内

<div id="forTheH2">
Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. 

</div>

然后，只需使用jQuery .html（）

$("#forTheH2").html("<h2>Change this text... </h2>");

Answer 2

这是解决隐藏/显示更多文本功能的不同方法，不需要Javascript。但是，它需要一些聪明的造型/定位，看起来像你想要它看起来。我使用复选框创建了一个小型演示，用于切换目的，使用:checked css 3伪选择器。



    #more {
  display: none;
}
label {
  float: right;
}
.morecontent {
  display: inline-block;
  height: 20px;
  width: 200px;
  overflow: hidden;
}
#more:checked ~ .morecontent {
  height: auto;
  overflow: visible;
}
label+label {
  display: none;
}
#more:checked + label {
  display: none;
}
#more:checked + label + label {
  display: inline;
}
.morecontainer {
  width: 250px;
}
.morecontent p {
  margin-top: 0;
}
<div class="morecontainer">

  <input type="checkbox" id="more" />
  <label for="more">...more</label>
  <label for="more">...less</label>
  <div class="morecontent">
    <p>This is the container that is supposed to have that more text functionality applied to it.</p>
    <ul>
      <li>This solution requires no Javascript.</li>
      <li>You can use a tiny little bit of JS for pure animation purposes.</li>
    </ul>
  </div>
</div>

jQuery中的h2标记错误阅读更多

2 个答案: