在一个有4张图像的网格的画廊上工作，当您单击其中一张图像时，该图像会展开，并且旁边会显示另一个带有一些内容的分区，将其余图像向下移动。
我的主要问题是：我不确定如何在显示新分区时使第4列不动。我一直在玩css职位，但没有成功
感觉很扎实，但也许我正在错误地解决，使用同位素会更容易吗？
我想出了这个小提琴：
http://jsfiddle.net/jupago/xq279/32/
$(".photo").click(function(e) {
if( $(this).prev().hasClass("open") ) {
$(this).prev().removeClass("open").addClass("closed");
}
else {
// if other menus are open remove open class and add closed
$(this).siblings().prev().removeClass("open").addClass("closed");
$(this).prev().removeClass("closed").addClass("open");
}
if( $(this).hasClass("opaque") ) {
$(this).removeClass("opaque");
}
else {
// change opacity of selected image
$(this).siblings().removeClass("opaque");
$(this).addClass("opaque");
}
});
我摆弄了一下，想出了这个：http : //jsfiddle.net/S3QpB/
HTML：我将第4行的box divs移到了后面，并给了它们id，这样我就可以在javascript中对它们进行测试。
<div class="wrapper">
<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="photo" id="box-4"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>
<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="photo" id="box-4-2"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>
<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="photo" id="box-4-3"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>
JavaScript：
$(".photo").click(function(e) {
if ( ($(this).attr('id') !== "box-4") && ($(this).attr('id') !== "box-4-2") && ($(this).attr('id') !== "box-4-3") ) {
if( $(this).prev().hasClass("open") ) {
$(this).prev().removeClass("open").addClass("closed");
}
else {
// if other menus are open remove open class and add closed
$(this).siblings().prev().removeClass("open").addClass("closed");
$(this).prev().removeClass("closed").addClass("open");
}
if( $(this).hasClass("opaque") ) {
$(this).removeClass("opaque");
}
else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("opaque");
$(this).addClass("opaque");
}
} else {
if( $(this).next().hasClass("open") ) {
$(this).next().removeClass("open").addClass("closed");
}
else {
$(this).siblings().next().removeClass("open").addClass("closed");
$(this).next().removeClass("closed").addClass("open");
}
if( $(this).hasClass("opaque") ) {
$(this).removeClass("opaque");
}
else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("opaque");
$(this).addClass("opaque");
}
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句