onclick 一个按钮展开成一个表单答案

【问题标题】：onclick a button to expand into a formonclick 一个按钮展开成一个表单
【发布时间】：2017-02-07 05:28:14
【问题描述】：

我有 3 个按钮布局，我想要它，所以当单击按钮时，框会轻松展开，变成一个小窗体。

这是我的布局

CSS：

        .order-box{width:800px; height:80px; margin:0 auto; margin-top:20px;}

        .order li{list-style:none;text-align:center; margin-left:70px; float:left;}
        .order li #order-btt:hover{background:#2e7794; cursor:pointer; font-weight:300;}
        .order li #order-btt{padding:10px 10px; width:160px; color:white; font-size:16px; background-color:black; opacity:0.6; -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s; border-radius:3px; cursor:pointer; border-radius:6px;}

HTML：

 <div class="order-box">
        <ul class="order">
            <li><input type="button" id="order-btt" name="order-btt" value="Order Yours" onclick="orderBox();" /></li>
            <li><input type="button" id="order-btt" name="order-btt" value="New Inventory" onclick="orderBox();" /></li>
            <li><input type="button" id="order-btt" name="order-btt" value="Test Drive" onclick="orderBox();" /></li>
        </ul>

javascript：

function orderBox(){
     document.getElementById("order-btt").onclick.(this is where im stuck)                 
}

哦，好吧，所以我想要这样的东西出现

HTML：

<form name="frm" id="frm" action="form-validation-advanced.html" method="get" onsubmit="return formValidation();">
<table border="1" cellspacing="5" cellpadding="5" align="center" width="500">
                <tr>
                    <td>
                        Name:
                    </td>
                    <td>
                        <input type="text" name="nm" id="nm" placeholder="Enter your name" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Age:
                    </td>
                    <td>
                        <input type="text" name="ag" id="ag" placeholder="Enter your age" />
                    </td>
                </tr>
                  <tr>
                    <td>
                        Email:
                    </td>
                    <td>
                        <input type="text" name="email" id="email" placeholder="Enter your email" />
                    </td>
                </tr>

【问题讨论】：

抱歉，HTML 没有正确显示，如果显示按钮，请见谅。
问题格式已关闭，但您可能想在表单元素上添加一个类（具有 CSS 动画/过渡）（即“#order-btt clicked”。你真的没有在这里使用任何类型的 javascript 库？

标签： javascript html forms button onclick

【解决方案1】：

Here's a jsfiddle to play with.

您需要解释按下按钮时想要显示的内容。

function orderBox(e) {
  var target = e.target
	alert(e.target.outerHTML);
}

.order-box {
  width: 800px;
  height: 80px;
  margin: 0 auto;
  margin-top: 20px;
}

.order li {
  list-style: none;
  text-align: center;
  margin-left: 70px;
  float: left;
}

.order li #order-btt:hover {
  background: #2e7794;
  cursor: pointer;
  font-weight: 300;
}

.order li .order-btt {
  padding: 10px 10px;
  width: 160px;
  color: white;
  font-size: 16px;
  background-color: black;
  opacity: 0.6;
  -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
  border-radius: 3px;
  cursor: pointer;
  border-radius: 6px;
}

<div class="order-box">
  <ul class="order">
    <li>
      <input type="button" class="order-btt" name="order-btt" value="Order Yours" onclick="orderBox(event)" />
    </li>
    <li>
      <input type="button" class="order-btt" name="order-btt" value="New Inventory" onclick="orderBox(event)" />
    </li>
    <li>
      <input type="button" class="order-btt" name="order-btt" value="Test Drive" onclick="orderBox(event)" />
    </li>
  </ul>

上面的 sn-p 包含一些可以帮助您入门的 JavaScript。

【讨论】：

【解决方案2】：

您可以使用 jquery 来实现这一点。最简单的方法在这里。在你的 head 标签内添加 jquery

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

你的功能将是

function orderBox(){
    $("#frm").slideToggle("slow");                 
}

您的表单 CSS 将是

#frm{ 
    display: none;
}

【讨论】：