Question

在一个有4个图像的网格的图库上工作，当你点击一个图像时，同一个图像会展开，另一个带有一些内容的分区会显示在它旁边，然后向下移动剩下的图像。

我的主要问题是：当新的部门出现时，我不确定如何使第4列不移动。我一直在玩css职位但没有成功

感觉非常稳固，但也许我接近错了，Isotope会更容易吗？

这个小提琴就是我提出来的：

$(".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");
    }
});

Answer 1

我摆弄了一下，想出了这个：http://jsfiddle.net/S3QpB/

HTML：我在第4行移动了盒子div并给了它们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");
  }
}
});

Jquery网格展开/折叠div兄弟画廊

1 个答案: