Question

有没有办法可以强制我动态生成的“阅读更多”文本显示为链接（以便当用户将鼠标悬停在其上时显示指向指针的光标）？整个代码正常工作，以便在单击时扩展段落，但我想要做的就是获取（阅读更多）作为链接（看着它你不会认为它是可点击的。）

我希望在第11行中添加-a-标记来包装代码中的文本应该可行，但是没有运气：

$(this).text( $(this).text() == 'Read Less' ? "<a href='#'>Read More</a>" : "<a href='#'>Read Less</a>");

See JSFiddle

Answer 1

您可以通过定位morelink_L3并执行以下操作来在CSS中实现此目的：

.morelink_L3 {
 cursor:pointer;
 margin-left:1.4em
}

我还在您的JSFiddle中看到您有多个具有相同ID的元素。由于您拥有morelink_L3课程，因此您可以删除moreLink ID。

Answer 2

链接上没有href使它看起来不像链接 - 要么添加href（和preventDefault），要么使用CSS作为链接样式。具有链接的附加值是可列表性，并允许视障用户知道这有动作
您使用.text插入html。

这样做效果更好 - 请注意悬停和preventDefault

$(document).ready(function() {
  $('.morelink_L3').on("click", function(e) {
    e.preventDefault();
    if ($(this).siblings().hasClass("readmore")) {
      $(this).siblings().removeClass("readmore");
    } else {
      $(this).siblings().addClass("readmore");
    }
    $(this).text($(this).text() == 'Read less' ? 'Read more' : 'Read less');

  });
});

.outer {
  border: 1px solid #000000;
  width: 300px;
  height: 400px;
  padding: 1em;
}

.story_L3 {
  width: 250px;
  height: 90px;
  margin: 1.5em;
  overflow: hidden;
  font-size: 13px
}

.readmore {
  height: auto !important;
}

#moreLink {
  margin-left: 1.4em
}

a {
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="outer">this is main box
  <div class="story_L3">This is inner box <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien la oreet mi taciti in nunc s emper, netus neque pulvinar aliquet diam con vallis. Facilisi lacus felis integer solli citudin luctus laoreet leo natoque,
    placerat sodales non porttitor accumsan arcu aliquet, sagittis risus poten ti hi men aeos dui inceptos aliquam. Sociosqu euismod in augue quisque at qui s tempor facilisi ad, cubilia vivamus accumsan suspendisse venenatis sagittis class volutpatelementum,
    vestibulum lacus habitasse libero felis luctus consequat mattis.</div>
  <!--<div id="moreLink"></div>-->
  <a href="#" class="morelink_L3">Read more</a>
</div>

<div class="outer">this is main box
  <div class="story_L3">This is inner box <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien la oreet mi taciti in nunc s emper, netus neque pulvinar aliquet diam con vallis. Facilisi lacus felis integer solli citudin luctus laoreet leo natoque,
    placerat sodales non porttitor accumsan arcu aliquet, sagittis risus poten ti hi men aeos dui inceptos aliquam. Sociosqu euismod in augue quisque at qui s tempor facilisi ad , cubilia vivamus accumsan suspendisse venenatis sagittis class volutpatelementum,
    vestibulum lacus habitasse libero felis luctus consequat mattis.</div>
  <a href="#" class="morelink_L3">Read more</a>
</div>

在jquery脚本中创建动态超链接

2 个答案: