Question

嗨，我正在尝试将标签选项显示为一个accoridion，而不是作为下拉列表，但它不会那样工作。我有这个＆lt; select onclick =“document.getElementById（'options'）;” onChange =“accordion（this.value）”name =“search_type”style =“margin-right：10px; margin-top：2px;”类=“按钮白色”＆GT; ＆lt; div id =“options”＆gt; ＆lt; option selected =“selected”value =“Precipitación”＆gt;Precipitación+＆lt; / option＆gt; ＆lt; option value =“veggies_search”＆gt; Humedad＆lt; / option＆gt; ＆lt; option value =“animals_search”＆gt;Precipitación＆lt; / option＆gt; ＆lt; option value =“all_search”＆gt;PresiónAtmosférica＆lt; / option＆gt; ＆lt; option value =“all_search”＆gt; Temperatura＆lt; / option＆gt; ＆lt; option value =“all_search”＆gt; Velocidad Viento＆lt; / option＆gt; ＆LT; / DIV＆GT; ＆LT; /选择＆GT; ＆lt; script type =“text / javascript”＆gt; function accordion（value）{ } ＆LT; /脚本＆GT; 我正在使用选择标签，因为我需要在触发按钮上显示所选选项的名称。 function accordion（value）{ } ＆lt; select onclick =“document.getElementById（'options'）;” onChange =“accordion（this.value）”name =“search_type”style =“margin-right：10px; margin-top：2px;”类=“按钮白色”＆GT; ＆lt; div id =“options”＆gt; ＆lt; option selected =“selected”value =“Precipitación”＆gt;Precipitación+＆lt; / option＆gt; ＆lt; option value =“veggies_search”＆gt; Humedad＆lt; / option＆gt; ＆lt; option value =“animals_search”＆gt;Precipitación＆lt; / option＆gt; ＆lt; option value =“all_search”＆gt;PresiónAtmosférica＆lt; / option＆gt; ＆lt; option value =“all_search”＆gt; Temperatura＆lt; / option＆gt; ＆lt; option value =“all_search”＆gt; Velocidad Viento＆lt; / option＆gt; ＆LT; / DIV＆GT; ＆LT; /选择＆GT; 希望您能够帮助我。非常感谢

Answer 1

div不是select的有效子项。你需要使用一些div和一些j来实现你想要做的事情。如下所示：

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

var options = document.getElementsByClassName("option");

for(var o = 0; o < options.length; o++) {
  options[o].addEventListener('click', function(e) {
  	this.parentElement.previousElementSibling.innerHTML = this.dataset.value;

    /* alert(e.target.dataset.value);  */
  })
}

＆＃13;

/* Style the buttons that are used to open and close the accordion panel */
.accordion, .option  {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover, .option:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px 0 0;
    background-color: white;
    display: none;
    overflow: hidden;
}

.option {
  padding: 9px 18px;
}

＆＃13;

<button class="accordion">Precipitación +</button>
<div class="panel">
  <div class="option" data-value="Humedad">Humedad</div>
  <div class="option" data-value="Presión Atmosférica">Presión Atmosférica</div>
  <div class="option" data-value="Temperatura">Temperatura</div>
  <div class="option" data-value="Velocidad Viento">Velocidad Viento</div>
</div>

＆＃13;

将<select>选项面板显示为手风琴而不是下拉列表

1 个答案: