如何创建一个只需要在html中定位的查看更多/阅读更多功能

How to create a see-more/Read-more feature requiring only anchors in the html?

本文关键字：定位 多功能 创建 何创建 一个 html      更新时间：2023-09-26

我正在开发一个网站，该网站将由不太懂技术的人维护，我需要能够让他们添加"查看更多"锚，这些锚使用Jquery上下滑动来显示其内容。

我的代码适用于readmore的单个实例，但当有多个实例时，它就会相当糟糕。

javascript/jquery

$(".see-more").nextUntil(".see-less").wrapAll("<div class='see-more-content'></div>");

$(".see-less").hide();
var count= 1
/*
$(".see-more-content").each(function(){
    var count= count+1;
    $(this).data("count",count);
    console.log(count);
});
*/
$(".see-more-content").slideUp(0);

$(".see-more").click(function(){
    $(".see-more-content").slideToggle();
    $(".see-more").hide();
    $(".see-less").show();
});
$(".see-less").click(function(){
    $(".see-more-content").slideToggle();
    $(".see-less").hide();
    $(".see-more").show();
});

HTML

<a class="see-more">See More...</a>
<ul>
<li>Advanced Elastic search Technology </li>
<li>Document Text Search</li>
<li>Embed Code Web Publishing for Images, Video &amp; PDFs</li>
<li>Video Management with HTML5 Full</li>
<li>Previews On the Fly Conversions and Transcoding</li>
<li>Print on Demand</li>
<li>Stylized Collections (Lightboxes/Galleries)</li>
<li>Alerts and Notifications</li>
<li>Comments, Ratings and Favorites</li>
<li>WordPress and Drupal CMS Integrations</li>
<li>Dropbox Integration</li>
<li>Asset Level Performance Analytics • Site Activity Analytics Dashboard</li>
<li>Unlimited Custom User Access Levels</li>
<li>Integrated Content Contribution and Workflow</li>
<li>Personal Profile Management</li>
<li>Mobile App and Site&nbsp;</li>
<li>Watermarking</li>
<li>Rights Management</li>
<li>All New Feature Releases3</li>
</ul>
<a class="see-less">See Less...</a></div>

我希望发生的事情：我希望类为seemore的锚点和类为seeless的锚点之间的所有内容都封装在div中，当点击seemore锚点时，div jquery会向下滑动，当点击Seemore时，会向上滑动。

发生了什么：当一个页面中只有一个"看得多"answers"看得少"的实例时，它非常有效。https://jsfiddle.net/TheWebTech/by3LsLuu/

当html中有多个see more和see less的实例时，第一个实例之后的所有see more+see less块的内容都被移动/包装到see more-sheeless块的第一个块实例中。

https://jsfiddle.net/TheWebTech/by3LsLuu/4/

如何防止所有内容都被包装到see-more see-less块的第一个实例中，而让每个块单独包装？

额外的好处，但不是真正需要的：我如何让每个人都能看到更多的部分，彼此分开上下滑动？

如果要保持布局不变，可以使用.prev()和.next()jQuery方法来确定您所引用的选择器组。这是一个更新的小提琴与两个实例：

https://jsfiddle.net/szva79d6/1/

首先，我已经使您的包装功能单独应用于每个选择器，如下所示：

$(".see-more").each(function() { 
    $(this).nextUntil(".see-less")
           .wrapAll("<div class='see-more-content'></div>");
});

我在这两个事件方法中所做的是使每个事件只作用于前一个或下一个同级，以便将事件正确地委托给每个动态包装的元素。

$(".see-more").click(function() {
  var $more    = $(this),
      $content = $more.next(".see-more-content"),
      $less    = $content.next(".see-less");
  $content.slideToggle();
  $more.hide();
  $less.show();
});
$(".see-less").click(function() {
  var $less    = $(this),
      $content = $less.prev(".see-more-content"),
      $more    = $content.prev(".see-more");
  $content.slideToggle();
  $less.hide();
  $more.show();
});

您需要针对特定的目标，请尝试以下操作：

$(".see-more").click(function(){
    $(this).next(".see-more-content").slideToggle(); // find next content and show
    $(this).hide(); // hide the see more button
    $(this).nextAll('.see-less').first().show(); // show the next see less button
});
$(".see-less").click(function(){
    $(this).prev(".see-more-content").slideToggle();
    $(this).hide();
    $(this).prevAll(".see-more").first().show();
});

这是一个更新的小提琴

相关文章：