使用toggleClass在图像高度之间切换，250 PX-450 to？
使用toggleClass在图像高度之间切换，250 PX-450 to？
提问于 2017-03-28 14:18:05
我正在建设一个网站，这是真正的形象沉重，一个投资组合网站。
我有一个砖石型画廊，每个图像设置为250像素的高度默认。我希望创建一个超链接/按钮，这将让用户决定他们想要查看的图像在正常大小(250 if )或更大的大小(450 If)。
图像被加载到一个名为#imageGallery的div中，我想了解单击按钮的最佳方法，它将添加/切换/删除类，将div中的所有图像调整为450 in。
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-03-28 14:23:28
似乎是toggleClass jQuery函数的基本用法。
$('#toggleBtn').click(function(){
$('.item').toggleClass( "expand" );
});.item{
height:250px;
}
.expand{
height:450px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleBtn">toggle</button>
<div id="imageGallery">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAbcF7stPcRmmZxkwuyoPewIEvnYQZvvTJ_f79-ZJ0TFsCn5NJUQ" />
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAbcF7stPcRmmZxkwuyoPewIEvnYQZvvTJ_f79-ZJ0TFsCn5NJUQ" />
</div>
Stack Overflow用户
发布于 2017-03-28 14:23:43
我想所有的缩略图都会有相同的类名。切换按钮时，可以使用jquery和切换类为这些元素选择所有缩略图。
function buttonClick(e) {
var thumbnails = $('.thumbnail');
thumbnails.toggleClass('.large-image');
}Stack Overflow用户
发布于 2017-03-28 14:29:35
我不会在每个元素上放置一个类，我会将类放在父元素上，并使用基于该类的CSS规则来更新高度。
.grid-item { height: 250px; }
.expanded .grid-item { height: 450px; }而不是全班的人
$("button").on("click", function () {
$("#imageGallery).toggleClass("expanded");
});或者香草JS
document.getElementById("buttonId").addEventListener("click", function() {
document.getElementById("imageGallery").classList.toggle("expanded");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43072058
复制相关文章
相似问题
腾讯云开发者
