html - 单击按钮后显示列

Question

我一直在使用 HTML，并创建了一个列，当我在浏览器中打开文件时会立即显示该列。我尝试移动列和行类，但我不知道如何获取它，以便在我从下拉菜单中选择一个选项之前，该列不会出现。我想知道如何解决这个问题？

<html>
    <head>
        <title>Testing Display</title>
    </head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .center{
        text-align: center;
        border: 3px solid #73AD21;
    }
    {
        box-sizing: border-box;
    }
    .column {
      float: left;
      width: 30%;
      padding: 10px;
      height: 2000px; 
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    </style>
    <body>

    <div class ="center">
        <p><div><h1>Testing Display</h1></div><br /><p>
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target" onchange="display(this)"> 
            <option value="none">Choose an option</option>
            <option value="one">Option one</option> 
        </select>
        <input type=button value="Select" onclick="display()"/>
        <div id="add"></div>
        </form>
        </div>
    </div>
    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
        <div id="div"></div> 
      </div>
    </div>
        <script src="order.js"></script>
    </body>
</html>

Answer 1

使列的初始可见性隐藏。

有一个 Javascript 函数可以在 onChange 列中添加一个新类。像这样的

function onSelect() {
  //or add id to easily access unique single element.
  var element = document.getElementByClassName("column")[0];
  element.classList.add("showCol");
} 

.column {
  visibility: hidden;
  ...
}
.showCol {
  visibility: visible;
  ...
}

还可以在 onChange 上添加样式和删除样式，而不是切换类。

Answer 2

Javascript解决方案，在下拉列表的onchange事件中调用该方法：

function ddlChange(){
if (document.getElementById("list").value === "one"){
        document.getElementsByClassName("column").style.display = "table-cell";
    }     
}

使用 jQuery：

$("#list").change(function () {
           if($('#list option:selected').val() === "one")
               $(".column").css("display","table-cell");
 });

或者，您也可以尝试添加或删除一个类，而不是更改内联 CSS 值。