Append Div on button

Question

<select name="pList" id="pList" style="display: none"> 
    <option value="">--ProductA--</option> 
    <option value="productA">ProdA</option> 
    <option value="productA">ProdA</option> 
    <option value="productA">ProdA</option> 
    <option value="">--ProductB--</option> 
    <option value="productB">ProdB</option> 
    <option value="productB">ProdB</option> 
    <option value="">--ProducstC--</option> 
    <option value="productC">ProdC</option> 
    <option value="productC">ProdC</option> 
    <option value="productC">ProdC</option> 
</select> 

我試圖將上述選擇值轉換成手風琴，我能夠成功地爲標題創建新的按鈕元素，但是當我嘗試追加每個元素時爲孩子選擇值，按鈕（應該工作作爲手風琴）內，無法正常工作，它只是增加值的標題，請參閱： https://jsfiddle.net/bernlt/txgnk89w/5/

var element = document.getElementById('pList'); 
    var children = element.children; 
    var filtered = []; 
    var filterItens = []; 
    // Create Headings for the Button e.g: --ProductA--/--ProductB--/--ProductC-- 
    for (var i = 0; i < children.length; i++) { 
     if (children[i].textContent.startsWith('--')) { 
      filtered.push(children[i].textContent); //Heading labels 
     }else{ 
     // separate array listing all products 
      filterItens.push(children[i].textContent); 
     } 
     } 
     var prods= filtered.toString().split(','); 
     var itens = filterItens.toString().split(','); 

    for (var i in prods) { 
    var newElement = document.createElement('button'); 
    newElement.className = "accordion"; 
    newElement.innerHTML = prods[i]; 
    document.body.appendChild(newElement); 
    } 
    for (var i = 0; i < children.length; i++) { // get arraylist values 
    if (children[i].value=="productA"){ 
     var foo = document.getElementById("--ProductA--"); 
     var newElement = document.createElement('div'); 
     newElement.id = children[i].value; 
     newElement.className = "productA"; 
     newElement.innerHTML = children[i].text; 
     foo.appendChild(newElement); 
    } 
    if (children[i].value=="productB"){ 
     var foo = document.getElementById("--ProductB--"); 
     var newElement = document.createElement('div'); 
     newElement.id = children[i].value; 
     newElement.className = "productB"; 
     newElement.innerHTML = children[i].text; 
     foo.appendChild(newElement); 
    } 
    if (children[i].value=="productC"){ 
     var foo = document.getElementById("--ProducstC--"); 
     var newElement = document.createElement('div'); 
     newElement.id = children[i].value; 
     newElement.className = "productC"; 
     newElement.innerHTML = children[i].text; 
     foo.appendChild(newElement); 
    } 
} 

我接受任何其他建議，如這是我的學習路徑aprt，基本上我試圖用select創建手風琴，所以任何幫助都會很好。

Answer 1

當你沒有懸停在該按鈕可以指定max-height: 0;。當您懸停時，將max-height設置爲任意數字，我使用200px，以便獲得手風琴效果。

var element = document.getElementById('pList'); 
 
    var children = element.children; 
 
    var filtered = []; 
 
    var filterItens = []; 
 
    // Create Headings for the Button e.g: --ProductA--/--ProductB--/--ProductC-- 
 
    for (var i = 0; i < children.length; i++) { 
 
    if (children[i].textContent.startsWith('--')) { 
 
     filtered.push(children[i].textContent); //Heading labels 
 
    } else { 
 
     filterItens.push(children[i].textContent); // separate array listing all products 
 
    } 
 
    } 
 
    var prods = filtered.toString().split(','); 
 
    var itens = filterItens.toString().split(','); 
 

 
    for (var i in prods) { 
 
    var newElement = document.createElement('button'); //button 
 
    newElement.id = prods[i]; 
 
    newElement.className = "accordion"; 
 
    newElement.innerHTML = prods[i]; 
 
    document.body.appendChild(newElement); 
 
    } 
 

 
    for (var i = 0; i < children.length; i++) { // get arraylist values 
 
    if (children[i].value == "productA") { 
 
     var foo = document.getElementById("--ProductA--"); 
 
     var newElement = document.createElement('div'); 
 
     newElement.id = children[i].value; 
 
     newElement.className = "productA"; 
 
     newElement.innerHTML = children[i].text; 
 
     foo.appendChild(newElement); 
 
    } 
 
    if (children[i].value == "productB") { 
 
     var foo = document.getElementById("--ProductB--"); 
 
     var newElement = document.createElement('div'); 
 
     newElement.id = children[i].value; 
 
     newElement.className = "productB"; 
 
     newElement.innerHTML = children[i].text; 
 
     foo.appendChild(newElement); 
 
    } 
 
    if (children[i].value == "productC") { 
 
     var foo = document.getElementById("--ProducstC--"); 
 
     var newElement = document.createElement('div'); 
 
     newElement.id = children[i].value; 
 
     newElement.className = "productC"; 
 
     newElement.innerHTML = children[i].text; 
 
     foo.appendChild(newElement); 
 
    } 
 
    }

button.accordion { 
 
    position: relative; 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
    max-height: 40px; /* Added */ 
 
    overflow: hidden; /* Added */ 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #ccc; 
 
    max-height: 200px; /* Added */ 
 
} 
 

 
button.accordion:after { 
 
    position: absolute; /* Added */ 
 
    top: 10px; /* Added */ 
 
    right: 10px; /* Added */ 
 
    /* float: right; Remove */ 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
} 
 

 
div.Hardware { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<select name="pList" id="pList" style="display: none"> 
 
    <option value="">--ProductA--</option> 
 
    <option value="productA">ProdA</option> 
 
    <option value="productA">ProdA</option> 
 
    <option value="productA">ProdA</option> 
 
    <option value="">--ProductB--</option> 
 
    <option value="productB">ProdB</option> 
 
    <option value="productB">ProdB</option> 
 
    <option value="">--ProducstC--</option> 
 
    <option value="productC">ProdC</option> 
 
    <option value="productC">ProdC</option> 
 
    <option value="productC">ProdC</option> 
 
</select>

您可能需要調整初始max-height: 40px;我設置根據自己的喜好以及對:hover國家max-height。

如果你想要一個確切的max-height可以處理使用Javascript懸停。計算懸停元素的子元素，將它們的外部高度一起添加，並通過JS將樣式屬性添加到父元素，並在模糊處理中將其刪除。

此外，不是使用浮動的+圖標開關用於此實例中的絕對位置。在此處使用浮點數時，使用max-width會導致+圖標在未懸停時隱藏。