javascript - 如何创建只需要 html 中的 anchor 的查看更多/阅读更多功能？

我正在一个网站上工作，该网站将由不太懂技术的人维护，我需要让他们能够添加“查看更多” anchor ，这些 anchor 使用 Jquery 向上/向下滑动以显示其内容。

我的代码适用于 read more 的单个实例，但是当有多个实例时，它会变得相当糟糕。

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>

我想要发生的事情:
我希望在带有类 see-more 的 anchor 和带有类 see-less 的 anchor 之间的所有内容都包裹在一个 div 中，当单击用于查看更多的 anchor 时，div jquery 会向下滑动，当单击更多时，并且单击 see-less 时向上滑动。

发生了什么:
当页面中只有一个 see-more 和 see-less 实例时，它可以完美运行。 https://jsfiddle.net/TheWebTech/by3LsLuu/

当html中有多个see-more和see-less实例时，第一个实例之后所有see-more+see-less块的内容全部移动/包裹到see-more see-的第一个块实例中添加更少的块。

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

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

奖金但不是真正必需的:我怎样才能让每个查看更多的部分相互独立地向上/向下滑动？

最佳答案

如果您要保持布局相同，您可以使用 .prev() 和 .next() jQuery 方法来确定您所指的选择器组。这是一个包含两个实例的更新 fiddle :

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

首先，我已经这样做了，以便您的包装功能单独适用于每个选择器，如下所示:

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

我在这两个事件方法中所做的是让每个事件只作用于前一个或下一个兄弟节点，以便您的事件正确地委托(delegate)给每个动态包装的元素。

$(".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();
});

关于javascript - 如何创建只需要 html 中的 anchor 的查看更多/阅读更多功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34615077/