Flex框图像选择

Question

我有一个窗口，在响应式弹性网格内有四个图像。我希望在点击图片时，这个图片会{Flex™}覆盖（或隐藏）其他图像。

我猜是使用jQuery和JavaScript，但我无法找到方法。有什么帮助吗？

感谢。

width=100%

.wrap {display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;}

.container
{box-shadow: 0.075rem 0 0 0 #C9C9C9,0 0.075rem 0 0 #C9C9C9,0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset,0 0.075rem 0 0 #C9C9C9 inset;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
float:left;}

.half
{margin: 0.25rem;}

.photo {width: 15rem;
max-width:100%;
}

Answer 1

我对您的HTML结构进行了一些更改。运行以下代码段

var classname = document.getElementsByClassName("photoContainer");
	var containerWidth = document.getElementsByClassName('container')[0].offsetWidth;

	var myFunction = function(ev) {
  
  if(this.classList.contains('expandImage')) {
  this.classList.remove('expandImage');
  for (var i = 0; i < classname.length; i++) {
	    	classname[i].classList.remove('hideImage');
		}

  return;
  }
		
		for (var i = 0; i < classname.length; i++) {
	    	classname[i].classList.add('hideImage');
		}
		this.classList.remove('hideImage');
		this.classList.add('expandImage');
	    this.style.width = containerWidth;
		

	};

	for (var i = 0; i < classname.length; i++) {
	    classname[i].addEventListener('click', myFunction, false);
	}

.wrap {
	display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

.container
{box-shadow: 0.075rem 0 0 0 #C9C9C9,0 0.075rem 0 0 #C9C9C9,0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset,0 0.075rem 0 0 #C9C9C9 inset;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
float:left;
position: relative;}

.half
{margin: 0.25rem;}

.photo {width: 15rem;
max-width:100%;
}

.hideImage {
	display: none
}

.expandImage > img {
    width: 100%;
}

<div class="wrap">
  
<div class="container">
<div class="half">
                    <div id="quarter1" class="photoContainer">
<img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" class="" alt="" title="">
                   
                    </div>    
                    <div id="quarter2" class="photoContainer">
<img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" class="" alt="" title="" >
                    </div>                    
</div>
<div class="half">
                    <div id="quarter3" class="photoContainer">
<img class="photo" src="https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435" class="" alt="" title="" >
                    </div>    
                   <div id="quarter4" class="photoContainer">
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" class="" alt="" title="" >
                    </div>                   
</div>