在按钮单击时显示按钮上方的div标签隐藏内容

时间：2016-09-13 12:20:15

标签： javascript jquery html css

我想在按钮（添加地址）上方的按钮上方显示div标签隐藏内容，同时按下div标签内容下方的按钮，再次在取消按钮上单击将按钮置于原始位置。我在.tpl文件中执行代码。

        function addPickupAddress()
        {
            $("#addPickupAddressForm").show();  
        }
<div id="addPickupAddressForm" style="height:100px;display: none;">
                        <span style="font-size:20px">Add Pickup Address</span>
                        <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
                        <tr>
                        <td>
                        Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
                        </td>
                        </tr>
                        </table>
                        </div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;padding-top: 10px;cursor:pointer;float: left; margin-left:120px; margin-bottom:10px;" onclick="addPickupAddress();">Add Address</button>

5 个答案:

答案 0 :(得分：0)

只需移除按钮上的float和隐藏height的固定div，按钮就会按预期显示在div下方。要再次隐藏div，可以使用jQuery的toggle()函数。另外，尽量不要使用内联样式，因为它会使代码的可读性降低。

function addPickupAddress() {
  $("#addPickupAddressForm").toggle();
  $("#addbuttonpickup").html($("#addbuttonpickup").html() == 'Cancel' ? 'Add Address' : 'Cancel');
}
button {
  color: white;
  background-color: #0899C9;
  padding: 5px;
  padding-top: 10px;
  cursor: pointer;
  margin-left: 120px;
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="display: none;">
  <span style="font-size:20px">Add Pickup Address</span>
  <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
    <tr>
      <td>
        Title</td>
      <td>
        <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
      </td>
    </tr>
    <tr>
      <td>
        First Name</td>
      <td>
        <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
      </td>
    </tr>
    <tr>
      <td>
        Last Name</td>
      <td>
        <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
      </td>
    </tr>
    <tr>
      <td>
        Address</td>
      <td>
        <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
      </td>
    </tr>
    <tr>
      <td>
        Address2</td>
      <td>
        <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
      </td>
    </tr>
    <tr>
      <td>
        City</td>
      <td>
        <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
      </td>
    </tr>
    <tr>
      <td>
        State</td>
      <td>
        <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
      </td>
    </tr>
    <tr>
      <td>
        PinCode</td>
      <td>
        <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
      </td>
    </tr>
    <tr>
      <td>
        Phone <span style="float: right;">+91</span>
      </td>
      <td>
        <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
      </td>
    </tr>
  </table>
</div>
<button type="button" id="addbuttonpickup" onclick="addPickupAddress();">Add Address</button>

答案 1 :(得分：0)

检查以下代码。它根据您的要求实施

function addPickupAddress() {
		$("#addPickupAddressForm").show();
		$("#cancelbutton").show();
		$("#addbuttonpickup").hide();
		
	}
	function hidePickupAddress() {
		$("#addPickupAddressForm").hide();
		$("#cancelbutton").hide();
		$("#addbuttonpickup").show();
		
	}
.buttonstyle {
	color: white;
	background-color: #0899C9;
	padding: 5px;
	padding-top: 10px;
	cursor: pointer;
	float: left;
	margin-left: 120px;
	margin-bottom: 10px;
}
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div id="addPickupAddressForm" style="display: none;">
		<span style="font-size: 20px">Add Pickup Address</span>
		<table id="addAddressTable" style="width: 470px; margin-left: 110px;"
			cellpadding="2">
			<tr>
				<td>Title</td>
				<td><input type="text" name="title" id="title_rev_pickup"
					placeholder="Enter Title"></td>
			</tr>
			<tr>
				<td>First Name</td>
				<td><input type="text" name="firstname"
					id="firstname_rev_pickup" placeholder="Enter First Name"></td>
			</tr>
			<tr>
				<td>Last Name</td>
				<td><input type="text" name="lastname" id="lastname_rev_pickup"
					placeholder="Enter Last Name"></td>
			</tr>
			<tr>
				<td>Address</td>
				<td><input type="text" name="address1" id="address1_rev_pickup"
					placeholder="Enter Address"></td>
			</tr>
			<tr>
				<td>Address2</td>
				<td><input type="text" name="address2" id="address2_rev_pickup"
					placeholder="Enter Address"></td>
			</tr>
			<tr>
				<td>City</td>
				<td><input type="text" name="city" id="city_rev_pickup"
					placeholder="Enter City Name"></td>
			</tr>
			<tr>
				<td>State</td>
				<td><input type="text" name="state" id="state_rev_pickup"
					placeholder="Enter State Name"></td>
			</tr>
			<tr>
				<td>PinCode</td>
				<td><input type="text" name="zipcode" id="zipcode_rev_pickup"
					placeholder="Enter ZipCode"></td>
			</tr>
			<tr>
				<td>Phone <span style="float: right;">+91</span></td>
				<td><input type="text" name="phone" id="phone_rev_pickup"
					placeholder="Enter City Name"></td>
			</tr>
		</table>
	</div>
	<button type="button" id="addbuttonpickup"
		class="buttonstyle"
		onclick="addPickupAddress();">Add Address</button>
	<button type="button" id="cancelbutton"
		class="buttonstyle" style="display:none"
		onclick="hidePickupAddress();">Cancel</button>

答案 2 :(得分：0)

尝试使用jquery toggle-function。 看看这支笔，看看它是如何使用的：http://codepen.io/anon/pen/rrxYxq 

function addPickupAddress ()
{
      $("#addPickupAddressForm").toggle();  
}

此外，Button在可见时显示在窗体内部，因为它的高度设置为100px，但元素内的子项实际上更高。取下它，高度将自动计算。

答案 3 :(得分：0)

将高度100px替换为100％以显示全高。

并在下面的div中放置取消按钮。

尝试以下代码。

＆＃13;
＆＃13; 
function addPickupAddress(isVisible)
        {
          if(isVisible){
            $("#addPickupAddressForm").show();  
            $('#Cancelbuttonpickup').show();
            }
          else{
            $("#addPickupAddressForm").hide();
            $('#Cancelbuttonpickup').hide();
            }
        }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="height:100%;display: none;">
                        <span style="font-size:20px">Add Pickup Address</span>
                        <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
                        <tr>
                        <td>
                        Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
                        </td>
                        </tr>
                        <tr>
                        <td>
                        Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
                        </td>
                        </tr>
                        </table>
                        </div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;" onclick="addPickupAddress(true);">Add Address</button>
<button type="button" id="Cancelbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;display:none;" onclick="addPickupAddress(false);">Cancel</button>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

你必须这样做

<service
    android:name=".package.YourService"
    android:enabled="true"
    android:exported="false"> </service>

<receiver
    android:name=".package.SimpleReceiver"
    android:enabled="true"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.BOOT_COMPLETED" />
        <action adroid:name="android.intent.action.QUICKBOOT_POWERON" />
    </intent-filter> 
</receiver>

另外，您必须删除div内容的固定大小。

为此创造了一个小提琴，请查看here

相关问题
最新问题