Question

我正在建立一个真正重要的网站，一个投资组合网站。

我有一个砌体类型库，默认情况下每个图像的高度设置为250px。我希望创建一个超链接/按钮，让用户决定是否要以正常尺寸（250px）或更大尺寸（450px）查看图像。

图像被加载到名为#imageGallery的div中，我想了解一个单击按钮的最佳方法，将添加/切换/删除一个类，该类将调整div中的所有图像至450px。

Answer 1

似乎是toggleClass jQuery函数的基本用法。

＆＃13;

$('#toggleBtn').click(function(){
  $('.item').toggleClass( "expand" );  
});

＆＃13;

.item{
  height:250px;
}
.expand{
  height:450px;  
}

＆＃13;

<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>

＆＃13;

Answer 2

我假设所有缩略图都具有相同的类名。切换按钮时，您可以选择带有jquery的所有缩略图，并为这些元素选择toggle a class。

function buttonClick(e) {
  var thumbnails = $('.thumbnail');
  thumbnails.toggleClass('.large-image');
}

Answer 3

我不会在每个元素上放置一个类，我会将该类放在父类上，并使用基于该类的CSS规则来更新高度。

.grid-item { height: 250px; }
.expanded .grid-item { height: 450px; }

而不是与班级的翻转

$("button").on("click", function () {
    $("#imageGallery).toggleClass("expanded");
});

或Vanilla JS

document.getElementById("buttonId").addEventListener("click", function() {
   document.getElementById("imageGallery").classList.toggle("expanded"); 
});

Answer 4

看看ma - 没有JavaScript（诚然，也不是最漂亮的HTML ......但是它有效）。

ul.gallery {
    list-style-tye: none;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}

ul.gallery img {
    height: 100px;
}

input#sizing:checked ~ ul img {
    height: 200px
}

input#sizing {
    display: none;
}

<input type="checkbox" id="sizing"><label for="sizing">Display in Large</label>
<ul class="gallery">
    <li><img src="https://s-media-cache-ak0.pinimg.com/originals/51/32/15/513215ec15a8596180e19a7a18ddcea0.jpg"></li>
</ul>

使用toggleClass在图像高度之间切换，250px - 450px？

4 个答案: