Question

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

Answer 1

您可以使用jquery实现此目的。最简单的方法就在这里。在头标记中添加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;
}

Answer 2

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

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>

上面的代码段包含一些可以帮助您入门的JavaScript。

点击按钮以展开成

2 个答案: