手风琴故障表格输入无线电HTML

时间:2018-06-15 18:10:16

标签: javascript html css forms accordion

我的手风琴没有正确显示我的表格,它会回到"隐藏模式"
我的javascript是

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

CSS

.column {
    float: left;
    width: 50%;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.head {
    width: 100%;
    text-align: center;
}
.foot {
    width: 100%;
    text-align: center;
}
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}
.active, .accordion:hover {
    background-color: #ccc;
}
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}

HTML

<div class="row">
  <div class="column">
    <form action="#" method="post">
    <button class="accordion">Graphics</button>
    <div class="panel">
      <input type="radio" name="g" value="no" id="none1"><label 
      for="none1">none</label><br>
      <input type="radio" name="g" value="yes" id="some1"><label 
      for="some1">some</label>
    </div>

    <button class="accordion">Color</button>
    <div class="panel">
      <input type="color" name="c" id="color"><label 
      for="color">Color</label>
    </div>
    </form>
  </div>
</div>

我正在从头开始为街机网站写作,所以任何帮助都表示赞赏,感谢每一位我也是初学者,所以任何提示都会受到欢迎。我必须使用单选按钮和颜色选择器,很快就会成为屏幕选项。再次感谢你们每一个人。根本没有图形

0 个答案:

没有答案