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

Question

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

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

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 中，当单击 see-more 的 anchor 时，div jquery 会向下滑动，当单击 see-more 时，并且单击 see-less 时向上滑动。

发生了什么:当页面中只有一个 see-more 和 see-less 实例时，它工作得很好。 https://jsfiddle.net/TheWebTech/by3LsLuu/

当 html 中有多个 see-more 和 see-less 实例时，第一个实例之后的所有 see-more+see-less block 的内容都被移动/包装到 see- 的第一个 block 实例中添加了更多看不见的 block 。

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

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

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

Answer 1

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

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

首先，我这样做是为了让您的包装函数分别应用于每个选择器，如下所示:

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

我在这两个事件方法中所做的是让每个事件只作用于前一个或下一个 sibling ，这样你的事件就可以正确地委托(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();
});