Estoy creando un widget de reseñas usando un deslizador elegante. Algunas revisiones son largas y necesito ocultarlas y estoy tratando de usar el complemento readmore.js para esto. Todo funciona bien, antes de disminuir la resolución al primer punto de interrupción, después de eso, cuando presiono el botón "leer más", la página se mueve a la parte superior o si agrega "/" después de "un href" en el código, la página simplemente permanece en el mismo lugar.
Aquí está la parte deslizadora resbaladiza
<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>¿Qué estoy haciendo mal?
Puedes usar javascript:; a la acción predeterminada del evento (por ejemplo, siguiendo un enlace)
moreLink: '<a href="javascript:;">Read more...</a>', lessLink: '<a href="javascript:;">Hide</a>',O
use jQuery (suponiendo que esté usando la demostración como clase principal)
$('.demo a').click(function(event) { event.preventDefault(); });