javascript - 带有 readmore.js 的光滑滑块

Question

我正在使用光滑的滑块制作评论小部件。有些评论很长，我需要隐藏它们，我正在尝试为此使用 readmore.js 插件。一切正常，在我将分辨率降低到第一个断点之前，之后当我按下“阅读更多”按钮时，页面移动到顶部，或者如果在代码中的“a href”之后添加“/”，页面就保留了在同一个地方。

这是光滑的滑块部分

 <script src="https://assets.codepen.io/3490843/jquery-2.1.0.min.js"></script>
 
 <script src="https://assets.codepen.io/3490843/readmore.min.js"></script>

  <script src="https://assets.codepen.io/3490843/slick.min.js"></script>
    
 

<script type="text/javascript">
    $(document).ready(function(){

$('.multiple-items').slick({
   autoplaySpeed: 3000, 
  autoplay: false,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  
responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        adaptiveHeight: true
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
        });
  
  </script>

Readmore.js

<script>
 $(function() { 
 $('.demo').readmore({ 
 moreLink: '<a href="#">Read more...</a>', 
 lessLink: '<a href="#">Hide</a>', 
 collapsedHeight: 56, 
 speed: 200, 
 afterToggle: function(trigger, element, expanded) { 
 if(! expanded) { // The "Close" link was clicked 
 $('html, body').animate({scrollTop: $(element).offset().top}, {duration: 100}); 
 } 
 } 
 }); 
 });
</script>

我究竟做错了什么？

标签： javascriptjquerycss

Answer 1

您可以使用javascript:;事件的默认操作（例如，跟随链接）

moreLink: '<a href="javascript:;">Read more...</a>', 
lessLink: '<a href="javascript:;">Hide</a>', 

或者

使用 jQuery（假设您使用 demo 作为父类）

$('.demo a').click(function(event) {
    event.preventDefault();
});