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);
    }
}

我对任何其他建议持开放态度，因为这是我的学习路径，基本上我正在尝试使用select创建手风琴，所以任何帮助都会很好。

Answer 1

当您没有将鼠标悬停在按钮上时，可以指定max-height: 0;。当您将鼠标悬停时，请将max-height设置为任意数字，我使用200px以获得手风琴效果。

＆＃13;

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);
     }
   }

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

您可能需要根据自己的喜好调整初始max-height: 40px;以及:hover州max-height。

如果您想要一个精确的max-height，您可以使用Javascript处理悬停。计算悬停元素的子项，将它们的外部高度加在一起，并通过JS将样式属性添加到父项，并在模糊时将其删除。

此外，不是使用float将+图标切换到此实例的绝对位置。在max-width处使用float会导致+图标在未悬停时隐藏。

将Div添加为按钮上的子项

1 个答案: