javascript - 鼠标悬停或单击链接/按钮时的菜单可扩展 CSS 脚本

Question

我想创建一个具有以下规范的 css:

1. 当我点击表单中的链接/按钮时，它应该水平展开选项。
2. 它应该在选择选项后折叠起来。

编辑:

为了详细说明我的查询，让我附上几张图片来解释确切的查询。

第 1 步。在图像字段上悬停或单击时，它应该展开包含 4 个图像的 Div。
第 2 步。如果我选​​择四个图像之一，折叠 Div 并在图像字段中显示所选图像。

请建议最好的代码。

Answer 1

好吧..希望我没听错..

var expandFn = function(){
	var wrappBl = document.getElementsByClassName('expand')[0];
	var trigg = document.getElementById('trigger');
	var el = document.getElementsByTagName('input');
	var elArr = [].slice.call(el);
	this.getAction = function(){
			trigg.addEventListener('click', function(){
				if(wrappBl.classList.contains('active')){
					wrappBl.classList.remove('active');
				}
				
				else {
					wrappBl.classList.add('active');
				}
			});
	
	}
	getAction()

	this.checkIf = function(){
		for (var i = 0; i < elArr.length; i++) {
			elArr[i].addEventListener('click', function(){
				if( this.checked === true){
				wrappBl.classList.remove('active');
				};
			})
			
		}
	}
	checkIf();
}
setTimeout(function(){expandFn();},0)

.expand input,
.expand label{
	display: block;
	width: 50%;
}
div.expand{
	width: 100px;
    -webkit-transition: transform 400ms ease, opacity 400ms ease;
    transition: transform 400ms ease, opacity 400ms ease;
    visibility:hidden;
    opacity: 0;
}

div.expand.active{
    visibility: visible;
    opacity: 1;
}

<div class="wrap">
	<a id="trigger" href="#">expand</a>

	<div class="expand">
		<h4>title of the option</h4>
		<input name="option1" type="checkbox">
		<label for="option1">choose that</label>
		<input name="option2" type="checkbox">
		<label for="option2">choose that</label>
		<input name="option3" type="checkbox">
		<label for="option3">choose that</label>
	</div>
</div>