菜單擴展的CSS腳本

Question

我想創建下列規格的CSS：

1. 當我點擊的形式鏈接/按鈕，就應該水平擴展的選項。
2. 選擇選項後應該摺疊。

編輯：

要闡述我的查詢，讓我重視其將解釋的確切查詢幾張圖片。

步驟1. onHover選項或的OnClick對圖像場，應該擴大一個DIV包含4個圖像
第2步。如果我選​​擇四個圖像之一，摺疊Div並在圖像字段中顯示所選圖像。

請提出建議的最佳代碼。

Answer 1

well..hopefully我理解正確的你..

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

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

.expand input, 
 
.expand label{ 
 
\t display: block; 
 
\t width: 50%; 
 
} 
 
div.expand{ 
 
\t 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"> 
 
\t <a id="trigger" href="#">expand</a> 
 

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