Question

我已为客户端实现了一个滑块（http://pgwjs.com/pgwslider/），但他的要求是，如果用户点击当前幻灯片上的图片，那么该图片应自动重新调整为更大的尺寸，并在第二次点击时它应该最小化到原始尺寸！

如何实现此功能？

Answer 1

您可以使用jquery的toggleClass函数在第一次单击时应用类，并在另一次单击时删除该类。在第一次单击时，在css中对此活动类应用活动和设置大小。

$('slider img').click(function(){
  $(this).toggleClass("test");
});

CSS

.test {
height:100px;
width:200px;
}

您可以尝试这样请更新班级名称

Answer 2

$(document).ready(function() {
    $('.pgwSlider').toggleClass('.larger');
});

......其中＆＃39; .larger＆＃39;是一个CSS类，可能会使滑块变大？

或者，如果您想使图像更大而不是整个滑块，您可以使用jQuery通过更改其CSS Visibility属性使图像显示并再次消失。

Answer 3

HTML将是这样的＆LT; img src =“/ resources / pen.png”id =“pen”class =“small”/＆gt;

css就像这样

img.small {
    width: 100px;
}

img.large {
    width: 500px;
}

jQuery代码将是这样的

$("img#pen").click(function(e) {
    $(this).toggleClass("large");
    $(this).toggleClass("small");
});