Question

我在一个容器中有2张图片，这两张图片都占据了观看者屏幕的50％。我想有一个可折叠的div，当单击左图像时，它会从左图像水平延伸到右图像上方/右图像上方，

点击图片A后，我希望div（B）在图片C上水平延伸，然后再次折叠回到图片A下

根据我的研究，我还没有完全找到需要的东西，我们将不胜感激。到目前为止，我一直试图以垂直-垂直的方式折叠图像，但是我什至无法使它正常工作。这是我的进度的摘要：http://jsfiddle.net/Dunne08/tfwyxksL/6/

    <div class="container">
    <div class="imageleftcontainer">
        <img alt="270x170" class="leftimage" src="https://raw.githubusercontent.com/Dunne08/split/master/images/A.jpg"  /> 
          </div>

          <div class="imagerightcontainer">
        <img alt="C" class="rightimage" src="https://raw.githubusercontent.com/Dunne08/split/master/images/C.jpg"  />
    </div>

</div>

CSS：

body {
  margin: 0px;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    margin: 0px;
}

.imageleftcontainer {
    float: left;
    width:50%;
    max-height:100vh;
    margin: 0px;
    padding: 0px;
    background-color: #000000;

}

.leftimage {
    width: 100%;
}

.imagerightcontainer {
    float: left;
    width:50%;  

    max-height:100vh;
    margin: 0px;
    padding: 0px;

}

.rightimage {
    width: 100%;
}

.container .content {
    display: none;
    padding : 5px;
}

脚本：

$(".imageleftcontainer").click(function () {

    $imageleftcontainer = $(this);
    //getting the next element
    $leftimage = $imageleftcontainer.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $leftimage.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $imageleftcontainer.text(function () {
            //change text based on condition
            return $leftimage.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Answer 1

这是一个演示：https://jsfiddle.net/3fqsoh4a/25/

$(".leftA").click(function(){
    $(".leftB").toggleClass("test");
});

我正在使用jquery的切换功能来实现这一目标。

水平折叠/扩展图像？

1 个答案: