Append Div on button
问题描述：
<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/Append Div on button
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创建手风琴，所以任何帮助都会很好。
答
当你没有悬停在该按钮可以指定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会导致+图标在未悬停时隐藏。